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.