⚠ī¸ 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.

Audio Song Select Track Playlist Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury

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