Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Audio Playlist Play Buttons JavaScript Programming Tutorial

Published :
Author :
Adam Khoury

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>