WWW FAQs: How do I let the user pick songs from a drop-down menu?


2006-01-04: Allowing users to change the current music by picking songs from a drop-down menu is easy and doesn't require Flash or PHP. All it takes is a little JavaScript, and a sneaky trick to work around common web browser flaws. First, read How do I embed sound and music in a page? to learn the basics of embedding music in a web page.

Now, let's consider the problem of switching songs. It's not difficult, but there are several things that should work... but don't. And that's where you can benefit from my painful experience! Read on for an explanation of the right solution, and see the end of the article for a working example that you can easily modify to suit your own needs.

Are you sure your page needs background music? Most users hate, detest and loathe websites with background music. Websites for bands are an exception.
1. Create a simple drop-down menu using the <select> element. We'll do this "on the fly" from JavaScript based on a list of MP3 files and song titles kept in our code.

2. Respond in some way when the user makes a selection from the menu. We'll do this using the onChange attribute, which calls JavaScript code whenever the user makes a selection.

3. Switch songs. This is the hard part. It should be easy: the embed element has a src attribute. Changing the value of that attribute should change the current song:

mysound = document.getElementById('mysound');
// DOESN'T WORK
mysound.src = "a_new_song.mp3";

Unfortunately, it doesn't, at least not in all popular browsers!

How do we work around this? Simple: instead of changing the src attribute, we replace the entire embed element. We do that by wrapping our embed element in a div element, fetching that div, and rewriting it with a new embed element:

wrapper = document.getElementById('mysound-wrapper');
// WORKS GREAT
wrapper.innerHTML = '<embed src="a_new_song_.mp3">';

Setting innerHTML allows us to replace the body of an element with entirely new HTML code. Powerful, isn't it! All major browsers sit up and take notice when we replace the embed element completely in this way. We'll also use innerHTML to insert the currently playing song title elsewhere on the page.

The following is the HTML code for a complete page that provides a song-selection menu. Consider opening a separate, small browser window for this code when the user clicks on an "I want to hear your band's music" link, or similar. That way the music player can stick around and songs can keep playing as users move between the other pages of your site.

<html>
<head>
<title>Songtastic Jukemeister</title>
<script>
// YOU NEED TO CHANGE THE ARRAY OF SONG URLs AND
// TITLES. Alternate MP3 file URLs and titles, in quotes
// and separated by commas, beginning with the first song URL.
// If you use " marks in filenames or titles, or put a \
// in front of them.
var songs = new Array(
  "http://www.boutell.com/boutell/a.mp3",
  "Song Title A",
  "http://www.boutell.com/boutell/b.mp3",
  "Song Title B",
  "http://www.boutell.com/boutell/c.mp3",
  "Song Title C",
  "http://www.boutell.com/boutell/d.mp3",
  "Song Title D"
);

function switchSongs(i)
{
  var file = songs[i * 2];
  var title = songs[i * 2 + 1];
  var element = document.getElementById('mysound_wrapper');
  element.innerHTML = embedSound(file);
  var element = document.getElementById('songtitle');
  element.innerHTML = title;
  var selector = document.getElementById('song_selector');  
  selector.selectedIndex = i;
  return;
}

function embedSound(sound)
{
  return '<embed src="' + sound + '" autostart="true" ' +
    'width="320" height="32">';
}
</script>
</head>
<body onLoad="switchSongs(0)">
<h1 align="center">Songtastic Jukemeister</h1>
<div align="center">
<select name="song_selector" id="song_selector"
  onChange="switchSongs(selectedIndex)">
<script>
for (i = 0; (i < songs.length); i += 2) {
  var file = songs[i];
  var title = songs[i + 1];
  document.write('<option value="' +
    i + '">' +
    title + '</option>\n');
}
</script>
</select>
<p>
<h4>Now Playing: <span id="songtitle"></span></h4>
<p>
<div id="mysound_wrapper">
<noscript>
Our music player requires that you enable JavaScript in your
web browser's preferences.
</noscript>
</div>
</div>
</body>
</html>

Now you have the tools you need! All you have to do is change the songs array at the top of the page to list your songs and their titles. Your users will be able to pick the song they want to hear by making a simple menu selection at any time.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!