Audio Playlist Play Buttons JavaScript Programming Tutorial
Learn to program independent audio tracks on the page, each with their own play button, that are all tied together. Dynamic application programming tutorial written in JavaScript, HTML5 and CSS3. The video contains line by line code explanations.
example.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio Tracks List Tutorial</title>
<style>
.trackbar{ background:#DDD; height:50px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.trackbar:nth-child(even) { background:#EEE; }
.playbutton{ opacity:.8; display:block; float:left; width:19px; height:22px; margin:14px 0px 0px 14px; background:url(images/ak_playbtn.png) no-repeat; border:none; cursor:pointer; outline:none; }
.playbutton:hover{ opacity:1; }
.trackname{ float:left; color:#000; margin:12px 0px 0px 14px; font-size:20px; font-weight:bold; }
</style>
<script>
function _(id){
return document.getElementById(id);
}
function audioApp(){
var audio = new Audio();
var audio_folder = "audio/";
var audio_ext = ".mp3";
var audio_index = 1;
var is_playing = false;
var playingtrack;
var trackbox = _("trackbox");
var tracks = {
"track1":["Fast Lane", "fast_lane"],
"track2":["Breathe", "breathe"],
"track3":["Stranglehold", "stranglehold"]
};
for(var track in tracks){
var tb = document.createElement("div");
var pb = document.createElement("button");
var tn = document.createElement("div");
tb.className = "trackbar";
pb.className = "playbutton";
tn.className = "trackname";
tn.innerHTML = audio_index+". "+tracks[track][0];
pb.id = tracks[track][1];
pb.addEventListener("click", switchTrack);
tb.appendChild(pb);
tb.appendChild(tn);
trackbox.appendChild(tb);
audio_index++;
}
audio.addEventListener("ended",function(){
_(playingtrack).style.background = "url(images/ak_playbtn.png)";
playingtrack = "";
is_playing = false;
});
function switchTrack(event){
if(is_playing){
if(playingtrack != event.target.id){
is_playing = true;
_(playingtrack).style.background = "url(images/ak_playbtn.png)";
event.target.style.background = "url(images/ak_pausebtn.png)";
audio.src = audio_folder+event.target.id+audio_ext;
audio.play();
} else {
audio.pause();
is_playing = false;
event.target.style.background = "url(images/ak_playbtn.png)";
}
} else {
is_playing = true;
event.target.style.background = "url(images/ak_pausebtn.png)";
if(playingtrack != event.target.id){
audio.src = audio_folder+event.target.id+audio_ext;
}
audio.play();
}
playingtrack = event.target.id;
}
}
window.addEventListener("load", audioApp);
</script>
</head>
<body>
<div id="trackbox"></div>
</body>
</html>