Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
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