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 = "
Error: Please select file(s) to download.
"; } } /* FALLBACK - PHP4 or when zip isn't enabled on PHP5 - requires pclzip.lib.php - http://www.phpconcept.net/pclzip/pclzip-downloads */ /* $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 = "
Error: Please select file(s) to download.
"; } } */ ?> Responsive Audio Player with Playlist, Timeline, Caption + Zip & Download

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

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: '  '

More demos and snippets

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