Professional Audio Player - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Professional Audio Player</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #6e8efb, #a777e3); font-family: 'Arial', sans-serif; } .audio-player { background: #ffffff; border-radius: 20px; padding: 20px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1); text-align: center; position: relative; max-width: 400px; width: 100%; } .audio-player img { width: 100px; height: 100px; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin-bottom: 20px; } .audio-player audio { width: 100%; margin-bottom: 10px; outline: none; } .controls { display: flex; justify-content: center; align-items: center; gap: 15px; } .controls button { background: #6e8efb; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; color: #fff; cursor: pointer; outline: none; transition: transform 0.3s ease; } .controls button:hover { transform: scale(1.1); } .progress-container { position: relative; height: 10px; background: #e1e1e1; border-radius: 10px; overflow: hidden; margin: 20px 0; } .progress { height: 100%; width: 0; background: #6e8efb; border-radius: 10px; transition: width 0.1s; } .time { font-size: 14px; color: #333; } .emoji { position: absolute; bottom: 10px; right: 10px; font-size: 20px; } .wave { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url('https://i.imgur.com/YXZsY5F.png') repeat-x; background-size: 50px 50px; animation: wave 1s linear infinite; opacity: 0.2; } @keyframes wave { from { background-position: 0 0; } to { background-position: 50px 0; } } </style> </head> <body> <div class="audio-player"> <img src="https://i.imgur.com/ZXBtVw7.jpg" alt="Audio Cover"> <audio id="audio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio> <div class="controls"> <button type="button" id="playPauseBtn" title="Play"><i class="fas fa-play"></i></button> <button type="button" id="stopBtn" title="Stop"><i class="fas fa-stop"></i></button> </div> <div class="progress-container"> <div class="progress"></div> <div class="wave"></div> </div> <div class="time"> <span id="currentTime">0:00</span> / <span id="duration">0:00</span> </div> <div class="emoji">🎵</div> </div> <script> const audio = document.getElementById('audio'); const playPauseBtn = document.getElementById('playPauseBtn'); const stopBtn = document.getElementById('stopBtn'); const progressContainer = document.querySelector('.progress-container'); const progress = document.querySelector('.progress'); const currentTimeEl = document.getElementById('currentTime'); const durationEl = document.getElementById('duration'); playPauseBtn.addEventListener('click', () => { if (audio.paused) { audio.play(); playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>'; } else { audio.pause(); playPauseBtn.innerHTML = '<i class="fas fa-play"></i>'; } }); stopBtn.addEventListener('click', () => { audio.pause(); audio.currentTime = 0; playPauseBtn.innerHTML = '<i class="fas fa-play"></i>'; }); audio.addEventListener('timeupdate', () => { const progressPercent = (audio.currentTime / audio.duration) * 100; progress.style.width = `${progressPercent}%`; const minutes = Math.floor(audio.currentTime / 60); const seconds = Math.floor(audio.currentTime % 60); currentTimeEl.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; }); audio.addEventListener('loadedmetadata', () => { const minutes = Math.floor(audio.duration / 60); const seconds = Math.floor(audio.duration % 60); durationEl.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; }); progressContainer.addEventListener('click', (e) => { const width = progressContainer.clientWidth; const clickX = e.offsetX; const duration = audio.duration; audio.currentTime = (clickX / width) * duration; }); </script> </body> </html>