Learn to code audio player in JS using HTML & CSS.
Video Part: 1
Video Part: 2
Source Code:
HTML
<!DOCTYPE html> <html> <head> <title>Custom Audio Player in JS</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="audio-player-cont"> <div class="logo"> <img src="images/audio-player.png" /> </div> <div class="player"> <div id="songTitle" class="song-title">Song title goes here</div> <input id="songSlider" class="song-slider" type="range" min="0" step="1" onchange="seekSong()" /> <div> <div id="currentTime" class="current-time">00:00</div> <div id="duration" class="duration">00:00</div> </div> <div class="controllers"> <img src="images/previous.png" width="30px" onclick="previous();" /> <img src="images/backward.png" width="30px" onclick="decreasePlaybackRate();" /> <img src="images/pause.png" width="40px" onclick="playOrPauseSong(this);" /> <img src="images/forward.png" width="30px" onclick="increasePlaybackRate();" /> <img src="images/next.png" width="30px" onclick="next();" /> <img src="images/volume-down.png" width="15px" /> <input id="volumeSlider" class="volume-slider" type="range" min="0" max="1" step="0.01" onchange="adjustVolume()" /> <img src="images/volume-up.png" width="15px" style="margin-left:2px;" /> </div> <div id="nextSongTitle" class="song-title"><b>Next Song :</b>Next song title goes here...</div> </div> </div> <script type="text/javascript" src="player.js"></script> </body> </html>
CSS
body{ background: #f1e7e7; } .audio-player-cont{ width: 450px; height: 135px; background: #f3ebdc; box-shadow: 0 0 6px 2px #c7a8a8; color: #003ba9; font-family: verdana; font-size: 12px; top:50%; left:50%; transform: translateX(-50%) translateY(-50%); position: absolute; } .logo{ float:left; } .player{ float:right; margin: 7px; } .song-title{ width: 300px; padding: 5px 0px 5px 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .song-slider{ width: 300px; } .current-time{ float:left; font-size: 10px; } .duration{ float:right; font-size: 10px; } .controllers{ clear: both; display: table; } .controllers *{ vertical-align: middle; margin-right: 2px; } .volume-slider{ width: 90px; margin-left:5px; }
JS
var songs = ["Don Moen - I Want To Be Where You Are.mp3", "don moen - I Want To Know More.mp3", "don moen - I want to know you more.mp3", "don moen - I Will Bless The Lord.mp3", "don moen - I Will Celebrate.mp3", "don moen - I Worship You Almighty God.mp3", "don moen - I Worship You, Almighty God.mp3", "don moen - I'm The God That Healed.mp3", "don moen - If You Could See Me Now.mp3", "don moen - it is well with my soul.mp3"]; var songTitle = document.getElementById('songTitle'); var songSlider = document.getElementById('songSlider'); var currentTime = document.getElementById('currentTime'); var duration = document.getElementById('duration'); var volumeSlider = document.getElementById('volumeSlider'); var nextSongTitle = document.getElementById('nextSongTitle'); var song = new Audio(); var currentSong = 0; window.onload = loadSong; function loadSong () { song.src = "songs/" + songs[currentSong]; songTitle.textContent = (currentSong + 1) + ". " + songs[currentSong]; nextSongTitle.innerHTML = "<b>Next Song: </b>" + songs[currentSong + 1 % songs.length]; song.playbackRate = 1; song.volume = volumeSlider.value; song.play(); setTimeout(showDuration, 1000); } setInterval(updateSongSlider, 1000); function updateSongSlider () { var c = Math.round(song.currentTime); songSlider.value = c; currentTime.textContent = convertTime(c); if(song.ended){ next(); } } function convertTime (secs) { var min = Math.floor(secs/60); var sec = secs % 60; min = (min < 10) ? "0" + min : min; sec = (sec < 10) ? "0" + sec : sec; return (min + ":" + sec); } function showDuration () { var d = Math.floor(song.duration); songSlider.setAttribute("max", d); duration.textContent = convertTime(d); } function playOrPauseSong (img) { song.playbackRate = 1; if(song.paused){ song.play(); img.src = "images/pause.png"; }else{ song.pause(); img.src = "images/play.png"; } } function next(){ currentSong = currentSong + 1 % songs.length; loadSong(); } function previous () { currentSong--; currentSong = (currentSong < 0) ? songs.length - 1 : currentSong; loadSong(); } function seekSong () { song.currentTime = songSlider.value; currentTime.textContent = convertTime(song.currentTime); } function adjustVolume () { song.volume = volumeSlider.value; } function increasePlaybackRate () { songs.playbackRate += 0.5; } function decreasePlaybackRate () { songs.playbackRate -= 0.5; }