Play MP3 on Website!

2005-08-03: To play songs in a random order, we need to create a randomized playlist. Before you continue, I strongly recommend that you read How do I play a list of several MP3 songs on a web page? to understand the basics.

Now that you've read about playlists, you know that we need to create a .m3u file that lists the URLs of the songs we want to play. But how can we put those songs in a random order for every user? The answer: we'll use PHP. Using PHP code, we can easily open up a .m3u file, shuffle the songs with PHP's built-in shuffle function, and deliver the result to the web browser as a playlist. We'll use a very cool feature of PHP called PATH_INFO to avoid creating any temporary playlist files. See the technical notes at the end of this entry for details on how it all works.

PHP is a great choice for this job. But users who are required to use Perl/CGI or ASP programming for web development can still use the ideas presented here in their own code. And the PATH_INFO trick demonstrated here works just as well for Perl CGI programs. But if you are using a free web hosting service that doesn't allow any kind of server-side programming... well, it's time to start paying for hosting that includes PHP support. Hosting services that include PHP can be really, really cheap these days. Less than $10 a month in fact. So skip a pizza once in a while and get a real web host. When you pay for your PHP hosting, the host doesn't stuff your page with annoying ads or, even worse, "spyware" programs that will make your visitors very angry.
Follow these steps to play MP3 files in a random order on your web page:

1. Create a playlist file called playlist.m3u containing all of the songs you want, in any order. See How do I play a list of several MP3 songs on a web page? for complete instructions on how to make a playlist file.

2. Upload playlist.m3u to your web site. When you do, make a note of the file system path to playlist.m3u on the server. If your FTP program shows that the folder is /home/sites/yourname/www.example.com/examples/, then the path to playlist.m3u is /home/sites/yourname/www.example.com/examples/playlist.m3u. Note: this is NOT a URL. It is the place on the server's hard drive where the file lives. If you don't understand this, reread it until you do!

3. Create the file randomsongs.php, containing the following. There must be ABSOLUTELY NO BLANK LINES OR WHITE SPACES AT THE BEGINNING! Otherwise it will be too late for the script to output a playlist instead of an HTML page when that is appropriate.

$playlist = "/home/sites/myname/www.example.com/examples/playlist.m3u";
if ($_SERVER['PATH_INFO'] == "/playlist.m3u") {
# This a request for the actual playlist.
playlist();
} else {
# Fall through to end of script and display
# the player HTML.
}
function playlist() {
header("Content-type: audio/mpeg");

# Needed for PHP versions OLDER than 4.2.0 only.
# If your host still has PHP older than 4.2.0, shame on them.
# Find a better web host.
srand(make_seed());

# Fetch our list of songs from a file.
$songs = file($playlist);
shuffle($songs);
# Now output the URLs in random order.
foreach ($songs as $song) {
# Remove newline and any other leading and trailing
# whitespace from URL of song.
$song = trim($song);
echo "$song\n";
}
# Now exit before any HTML is produced.
exit(0);
}
# Needed only for very old versions of PHP,
# see srand call earlier.
function make_seed()
{
list($usec, $sec) = explode(' ', microtime());
return (float) $sec + ((float) $usec * 100000);
}
?>

MP3s Playing in Random Order


hidden="true"
autostart="true"
type="audio/mpeg"
loop="true">

4. At the top of randomsongs.php change the setting of the $playlist variable to match the file system path of your playlist file... which you wrote down in step two.

5. randomsongs.php assumes you will be placing your PHP page in a folder on your web site called /examples. If that's not right, change the src attribute of the embed element. DO NOT remove /playlist.m3u from the end of the URL. If you want to know why it's there, read the technical notes at the end of this entry.

5. Upload randomsongs.php to your web server.

6. Upload your .mp3 files if you have not already done so.

7. Access randomsongs.php with your web browser. In our example, the URL would be http://www.example.com/examples/randomsongs.php, but of course your URL will be different. Your songs will begin to play in a random order.

Insert the embed element anywhere inside the body element of your page. If you choose to make the player visible, place the embed element at an appropriate location within the page.

Congratulations, you're the proud owner of an HTML Shuffle. Much cheaper than the iPod Shuffle! (Just kidding, Apple.)

If your songs don't play:

1. Make sure you have successfully completed How do I play a list of several MP3 songs on a web page? first. Make sure you are successful with an ordinary playlist file before you move on to using randomsongs.php.

2. If you are using a very old version of PHP, or PHP compiled for CGI use instead of Apache module use, it's possible that $_SERVER['PATH_INFO'] doesn't work properly in your environment. With a little ingenuity, the script can be modified to create temporary .m3u files instead of outputting playlists directly to the browser.

Technical Notes

You could write a PHP page that creates a new .m3u file on the server for every visitor. Then your PHP code would output the HTML for a player that uses the src attribute of the element to point to that newly created file. But then you would have piles of temporary .m3u files lying around. And you would need more code to clean them up every so often. Yuck.

Fortunately, there's a simpler way.

PATH_INFO to the Rescue

When a user accesses, let's say, http://www.example.com/examples/mypage.php, the PHP code in mypage.php runs. That's not surprising to anyone.

But this might surprise you: when a user accesses http://www.example.com/examples/mypage.php/extrastuff, the user does not get an error. Instead, mypage.php still runs... and the "extra" part of the URL, /extrastuff, shows up in the PHP variable $_SERVER['PATH_INFO'].

How does this help us? We can use the src attribute of the embed element for our player to point right back to the PHP script... with /playlist.m3u tacked on to the end.

Before you blame our use of the MIME type audio/mpeg instead of audio/mpegurl for this pickiness about file extensions, you'd better read How do I play streaming audio on my web page? very carefully. In a nutshell, audio/mpegurl is the "right" way, but the fact is it doesn't work for lots of users.
That helps us in two ways:

First, even though they shouldn't do this and mime types should absolutely always tell browsers what to do, the fact is that many web browser/MP3 player combinations just won't accept a playlist unless the file appears to have a .m3u file extension. That means we need that /playlist.m3u at the end of the URL to make, for instance, Firefox for Windows happy.

Second, we can make this work for us by recognizing the /playlist.m3u part of the URL and generating the randomized playlist directly from PHP, writing it straight to the browser when the browser actually asks for it. No temporary files, no muss, and no fuss.

COUNTER