Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Audio Playlist Array Tutorial

Learn to program an HTML5 audio object playlist using JavaScript arrays. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ background:#666; } div#audio_player{ width:450px; height:60px; background: url(images/skin1.png) no-repeat; border-radius:4px;} div#audio_controls{ margin-left:66px; } div#audio_controls > button{ border:none; cursor:pointer; outline:none; display:block; float:left; margin:22px 10px 0px 0px; } div#audio_controls > input{ outline:none; display:block; float:left; margin:24px 10px 0px 0px; } button#playpausebtn{ background:url(images/pause.png) no-repeat; width:12px; height:14px; } button#mutebtn{ background:url(images/speaker.png) no-repeat; width:5px; height:14px; } input#seekslider{ width:100px; } input#volumeslider{ width: 70px; } div#timebox{ margin: 23px 10px 0px 0px; float:left; width:80px; background:#000; border-bottom:#333 1px solid; text-align:center; color: #09F; font-family: Arial, Helvetica, sans-serif; font-size:11px; } input[type='range'] { -webkit-appearance: none !important; margin:0px; padding:0px; background: #000; height:13px; border-bottom:#333 1px solid; } input[type='range']::-ms-fill-lower { background:#000; } input[type='range']::-ms-fill-upper { background:#000; } input[type='range']::-moz-range-track { border:none; background: #000; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; background: radial-gradient(#FFF, #333); height:11px; width:11px; border-radius:100%; cursor:pointer; } input[type='range']::-moz-range-thumb { background: radial-gradient(#FFF, #333); height:11px; width:11px; border-radius:100%; cursor:pointer; } input[type='range']::-ms-thumb { -webkit-appearance: none !important; background: radial-gradient(#FFF, #333); height:11px; width:11px; border-radius:100%; cursor:pointer; } </style> <script> function initAudioPlayer(){ var audio, playbtn, mutebtn, seekslider, volumeslider, seeking=false, seekto, curtimetext, durtimetext, playlist_status, dir, playlist, ext, agent; dir = "audio/"; playlist = ["Stoker","Skull_Fire","Scurvy_Pirate"]; playlist_index = 0; ext = ".mp3"; agent = navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') != -1 || agent.indexOf('opera') != -1) { ext = ".ogg"; } // Set object references playbtn = document.getElementById("playpausebtn"); mutebtn = document.getElementById("mutebtn"); seekslider = document.getElementById("seekslider"); volumeslider = document.getElementById("volumeslider"); curtimetext = document.getElementById("curtimetext"); durtimetext = document.getElementById("durtimetext"); playlist_status = document.getElementById("playlist_status"); // Audio Object audio = new Audio(); audio.src = dir+playlist[0]+ext; audio.loop = false; audio.play(); playlist_status.innerHTML = "Track "+(playlist_index+1)+" - "+ playlist[playlist_index]+ext; // Add Event Handling playbtn.addEventListener("click",playPause); mutebtn.addEventListener("click", mute); seekslider.addEventListener("mousedown", function(event){ seeking=true; seek(event); }); seekslider.addEventListener("mousemove", function(event){ seek(event); }); seekslider.addEventListener("mouseup",function(){ seeking=false; }); volumeslider.addEventListener("mousemove", setvolume); audio.addEventListener("timeupdate", function(){ seektimeupdate(); }); audio.addEventListener("ended", function(){ switchTrack(); }); // Functions function switchTrack(){ if(playlist_index == (playlist.length - 1)){ playlist_index = 0; } else { playlist_index++; } playlist_status.innerHTML = "Track "+(playlist_index+1)+" - "+ playlist[playlist_index]+ext; audio.src = dir+playlist[playlist_index]+ext; audio.play(); } function playPause(){ if(audio.paused){ audio.play(); playbtn.style.background = "url(images/pause.png) no-repeat"; } else { audio.pause(); playbtn.style.background = "url(images/play.png) no-repeat"; } } function mute(){ if(audio.muted){ audio.muted = false; mutebtn.style.background = "url(images/speaker.png) no-repeat"; } else { audio.muted = true; mutebtn.style.background = "url(images/speaker_muted.png) no-repeat"; } } function seek(event){ if(seeking){ seekslider.value = event.clientX - seekslider.offsetLeft; seekto = audio.duration * (seekslider.value / 100); audio.currentTime = seekto; } } function setvolume(){ audio.volume = volumeslider.value / 100; } function seektimeupdate(){ var nt = audio.currentTime * (100 / audio.duration); seekslider.value = nt; var curmins = Math.floor(audio.currentTime / 60); var cursecs = Math.floor(audio.currentTime - curmins * 60); var durmins = Math.floor(audio.duration / 60); var dursecs = Math.floor(audio.duration - durmins * 60); if(cursecs < 10){ cursecs = "0"+cursecs; } if(dursecs < 10){ dursecs = "0"+dursecs; } if(curmins < 10){ curmins = "0"+curmins; } if(durmins < 10){ durmins = "0"+durmins; } curtimetext.innerHTML = curmins+":"+cursecs; durtimetext.innerHTML = durmins+":"+dursecs; } } window.addEventListener("load", initAudioPlayer); </script> </head> <body> <div id="audio_player"> <div id="audio_controls"> <button id="playpausebtn"></button> <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> <div id="timebox"> <span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span> </div> <button id="mutebtn"></button> <input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> </div> </div> <h2 id="playlist_status" style="color:#FFF;"></h2> </body> </html>
thumb

JavaScript Videos

Audio Programming

Button Sound Effects Tutorial Audible Menu SystemsAudio Play Pause Mute Buttons TutorialAudio Seek and Volume Range Slider TutorialAudio Time Update Position TutorialAudio Player Skins and CSS Graphics TutorialAudio OGG Files CheckAudio Play Speed Setting playbackRate TutorialAudio Playlist Play Buttons JavaScript Programming TutorialAudio Playlist Array TutorialAudio Song Select Track Playlist TutorialAnalyser Bars Animation HTML Audio API TutorialPlay Uninterrupted Background Music On Your WebsiteHow to Create Custom Sound Effects with FruityLoops