You are here: Home / Freebies For Websites / Demos & Snippets

Responsive Audio Player with Playlist, Timeline, Caption + Zip & Download

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).

Additionally, desktop visitors can download selected tracks with a convenient zip and download feature.

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.

 

• Click / Clash [1 / 15]
• Deception [2 / 15]
• Gettin' Down To Business [3 / 15]
• I Got My Eye On You [4 / 15]
• Like A Dream [5 / 15]
• Makin' Mischief [6 / 15]
• Music Is Magic [7 / 15]
• Only The Beginning [8 / 15]
• Outta My Way [9 / 15]
• She's Got The Power [10 / 15]
• Takin' It All [11 / 15]
• Too Close [12 / 15]
• Truly Outrageous [13 / 15]
• Twilight In Paris [14 / 15]
• Winning Is Everything [15 / 15]

PHP Code

We'll get to the zip and download portion of the script later, but first, here's the music-related bumf to get the mp3s into the player / playlist, and the track name into the info box.

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 generated like this;

<form action="#playlist" method="post">
<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><span class='check'><input type='checkbox' name='file[]' value='$file' /></span><a href='#' data-audio-src='$file'><b>$song</b> <span class='count'>[$i / ".count($files)."]</span></a></li>\n";
    $i++; // increment track number count
    }
?>
</ul>
<input type="submit" class="download-submit" name="downloadSubmit" value="Zip and Download" />
</form>

Now for the zip and download part. This goes right at the very top of your web page, even above the DOCTYPE, and requires the zip extension to be enabled in PHP5;

<?php // zip and download - with zip extension enabled
$error = '';
if (isset($_POST['downloadSubmit'])) {
    $files = $_POST['file'];
    $zipname = time().'-archive.zip';
    $zipfile = new ZipArchive();
    $zipfile->open($zipname, ZipArchive::CREATE);
    if (count($files) > 0) {
        foreach ($files as $file) {
            $zipfile->addFile($file);
            }
        $zipfile->close();
        header('Content-type: application/zip');
        header('Content-Disposition: attachment; filename='.$zipname);
        ob_clean();
        flush();
        readfile($zipname);
        unlink($zipname);
        } else {
        $error = "<div id='error' class='show'><b>Error:</b> Please select file(s) to download.</div>";
        }
    }
?>

If your web host doesn't have the zip extension enabled, you can use this code below instead, but you'll need to download the pclzip.lib.php file too;

<?php // zip and download - without zip extension enabled
$error = '';
if (isset($_POST['downloadSubmit'])) {
    require("path/to/pclzip.lib.php"); // download the 'pclzip.lib.php' file and reference it here
    $files = $_POST['file'];
    $zipname = time().'-archive.zip';
    $zipfile = new PclZip($zipname);
    if ($zipfile->add($files) > 0) {
        header('Content-type: application/zip');
        header('Content-Disposition: attachment; filename='.$zipname);
        ob_clean();
        flush();
        readfile($zipname);
        unlink($zipname);
        } else {
        $error = "<div id='error' class='show'><b>Error:</b> Please select file(s) to download.</div>";
        }
    }
?>

Lastly, put the error message wherever you want it to show;

<?php echo $error; ?>

Download

Didn't catch all that? No problem, you can download a text file of the PHP, HTML, CSS and JS.

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.