Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Audio Song Select Track Playlist Tutorial

Learn to add a song selection playlist interface to your web audio programs so you can offer users unlimited lists of songs to browse, select and play. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #mylist{ font-size:20px; width:250px; padding:5px; } </style> <script> function initAudio(){ var audio, dir, ext, mylist; dir = "audio/"; ext = ".mp3"; // Audio Object audio = new Audio(); audio.src = dir+"Jam_On_It"+ext; audio.play(); // Event Handling mylist = document.getElementById("mylist"); mylist.addEventListener("change", changeTrack); // Functions function changeTrack(event){ audio.src = dir+event.target.value+ext; audio.play(); } } window.addEventListener("load", initAudio); </script> </head> <body> <select id="mylist" size="4"> <option value="Jam_On_It">Jam On It</option> <option value="Stoker">Stoker</option> <option value="Skull_Fire">Skull Fire</option> <option value="Scurvy_Pirate">Scurvy Pirate</option> </select> </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