â ī¸ Warning â ī¸ Deprecated Code! This video tutorial contains outdated code.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
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>