Responsive Audio Player with Playlist, Timeline + Caption

This demo will automatically populate a playlist from mp3s in a folder. The title of the current song is displayed in the caption box, a toggle switch stops/starts playback and the draggable marker can be moved along the timeline to fast-forward and rewind (on touch devices, a tap anywhere along the timeline has the same effect).

Works in modern browsers and IE9+ (no loading animation in IE9).

Please view the source of this page for HTML markup, CSS and JS. The relevant PHP is provided below.

You are listening to: ' Broadway Magic '

PHP Code

This snippet gets all the mp3s in a folder;

$files = glob('relative/path/to/audio/*.mp3');
// get all .mp3 files from folder
$fname = $files[0]; // get 1st filename
$ftext = ucwords(str_replace('_', ' ', basename($fname, '.mp3'))); // format text for display

Here's how the first mp3 populates the audio player;

<audio id="music" preload="none">
    <source src="<?php echo $fname; ?>"/>

And this is how the nicely formatted filename gets in to the infobox;

<div id="infobox" class="box">You are listening to: '<b><?php echo $ftext; ?></b>'</div>

The playlist is lastly generated like this;

<ul id="playlist" class="box">
$i = 1;
// start track numbering from 1
foreach ($files as $file) {
    $song = ucwords(str_replace('_', ' ', basename($file, '.mp3')));
// format text for display
    echo "<li><a href='#' data-audio-src='$file'><b>$song</b> <span>[$i / ".count($files)."]</span></a></li>\n";
// increment track number count



More demos and snippets

Did you find this useful? There are more demos and code snippets this way.