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.
- Broadway Magic [1 / 25]
- Click / Clash [2 / 25]
- Deception [3 / 25]
- Designing Woman [4 / 25]
- Gettin' Down To Business [5 / 25]
- I Am A Giant [6 / 25]
- I Got My Eye On You [7 / 25]
- Like A Dream [8 / 25]
- Love Is Here [9 / 25]
- Love Unites Us [10 / 25]
- Makin' Mischief [11 / 25]
- Music Is Magic [12 / 25]
- Only The Beginning [13 / 25]
- Outta My Way [14 / 25]
- Running Like The Wind [15 / 25]
- Share A Little Bit [16 / 25]
- She's Got The Power [17 / 25]
- Something Is Missing [18 / 25]
- Takin' It All [19 / 25]
- There's A Melody Playin' [20 / 25]
- Time Is Running Out [21 / 25]
- Too Close [22 / 25]
- Twilight In Paris [23 / 25]
- Winning Is Everything [24 / 25]
- You Oughta See The View From Here [25 / 25]
PHP Code
This snippet gets all the mp3s in a folder;
<?php
$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; ?>"/>
</audio>
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">
<?php
$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";
$i++; // increment track number count
}
?>
</ul>
Related
- Random Auto-Play Audio with Caption + Cookie
- Responsive, Random, Auto-Play Audio with Timeline, Caption + Cookie
- Responsive Video Player with Playlist + Caption
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.