Question

I have an <audio> element with controls like so:

<audio controls="controls" id="audio-sample" preload="auto">
    <source src="../../music-sample.php?type=ogg&amp;id=<?php echo $item->custom_5; ?>" type="audio/ogg" />
    <source src="../../music-sample.php?type=mp3&amp;id=<?php echo $item->custom_5; ?>" type="audio/mp3" />
</audio>

The player shows up, and the sound plays just fine, but the trackbar doesn’t move to reflect the elapsed time, and it can’t be dragged to seek. Why not? Do I need to send some sort of additional header? This is all the relevant PHP, nothing special:

header('Content-Type: ' . $mimetype[$type]);

$file = fopen($filename, 'rb');
fpassthru($file);
fclose($file);
exit();

You can see the problem live here.

Answer 1

Try setting the Content-Length header…

header("Content-Length: " . filesize($filename));

For some reason without that info up front, it can’t do the necessary math to place the track bar.