Question

I’m having an issue with audio tag and Firefox. I am using the default browsers’ controls. It works fine with Chrome and Opera, but in Firefox progress bar stays on right(like it was the end of the record) – the sound plays normally, but I can’t seek through the file. What did I do wrong?

Here’s how I send my file to browser.

header('Content-Description: File Transfer');
header('Content-Type: audio/wav');
header('Content-Disposition: attachment; filename=' . basename($clientName));
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . filesize($file));

readfile($file);

And my use of audio tag:

<audio preload="auto" controls="controls" src="/record/download/id/55" />

Thanks in advance for your answers.

Answer 1

Firefox will send range requests (with the “Range” request header) and your server code should respond accordingly (with “206 Partial Content” status). When the server doesn’t appear to understand range request firefox will assume it’s some kind of a live stream and behave in the described manner.

If your code runs through an apache server you can have it handle range requests for you, for instance by using mod_xsendfile. Another option is to implement is yourself. For details see RFC 2616, especially section 10.2.7 and 14.35.