HTML5 audio from mongodb GridFS

Question

I have a MongoDB database with audio files stored in GridFS. HTML5 audio tag works with a link to a method that gets audio from MongoDB:

$file = $grid->findOne(array('_id' => new MongoId($id)));
header('Content-Length: ' . $file->file['length']);
header('Content-Type: ' . $file->file['file_type']);
header("Content-Disposition: filename=" . $file->file['filename']);
echo $file->getBytes();

All is good but one thing: I can't use slidebar to skip through audio, it only plays from start to end.

Answer 1

Try adding an Accept-Ranges = bytes header. From http://html5doctor.com/html5-audio-the-state-of-play/:

Most audio-capable browsers enable seeking to new file positions during a download. To allow this, you must enable range requests on your server. Although enabled by default on web servers such as Apache, you can verify by checking that your server responds with the Accept-Ranges header.

Also a X-Content-Duration = length_in_seconds header may help if the files are in ogg format. From https://developer.mozilla.org/en-US/docs/Configuring_servers_for_Ogg_media:

The Ogg format doesn't encapsulate the duration of media, so for the progress bar on the video controls to display the duration of the video, Gecko needs to determine the length of the media using other means.

There are two ways Gecko can do this. The best way is to offer an X-Content-Duration header when serving Ogg media files. This header provides the duration of the video in seconds (not in HH:MM:SS format) as a floating-point value.

Both of these headers help the browser to determine the audio's duration before the file is fully downloaded so that seeking is possible, and the playhead can be positioned properly.