element with controls' trackbar not moving

问题

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.

回答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.

回答2:

The trick to getting it working on Firefox and Safari specifically is to send a Content-Range header, as described here.

$length = filesize($filename);

header('Content-Type: ' . $mimetype[$type]);
header('Content-Length: ' . $length);
header('Content-Range: bytes 0-' . ($length - 1) . '/' . $length);

readfile($filename);

回答3:

My Experience

There is nothing wrong with your code. I had this issue once and .. And it was a simple cache issue on Firefox and Content-Length which you have discovered

c.php

<audio controls="controls" id="audio-sample" preload="auto">
    <source src="a.php?type=ogg&id=0" type="audio/ogg" />
    <source src="a.php?type=mp3&id=1" type="audio/mp3" />
</audio>

a.php

$id = intval($_GET['id']);
$files = array(0 => "audio.ogg",1 => "audio.mp3");
$filename = $files[$id];

header('Content-Type: ' . mime_content_type($filename));
header("Content-transfer-encoding: binary");
header("Content-Length: " . filesize($filename));

ob_clean();
flush();
readfile($filename);
exit();

This worked 100% in Firefox but when i changed readfile($filename) to

  readfile("SIMPLE ERROR ERROR");

Firefox sill pays the audio for me instead of not paying any file the only way to make it realize the mistake was to add a random string to the src file

<source src="a.php?type=ogg&id=0&<?php echo mt_rand(); ?>" type="audio/ogg" />
                                             ^---- rand string

This way the URL was requested Firefox stooped playing the audio instantly

The Problem

Because you have tried to stream the content before with Zero Content-Length that is sill the reason your audio is not paying ..... Firefox has cached the initial invalid content

Solution

Clear all your cache .. with the following code above your code should work fine or just add the rand parameter in your code for testing

Invalid Relative Position

Permanently using mt_rand() would make it difficult for Firefox to cache the audio file which results in Invalid Relative solution.

Remove the mt_rand after the cleaning of cache and this would be fixed

回答4:

A combination of Content-Type = audio/ogg, Content-Length, Accept-Ranges = bytes, and most importantly, I think the X-Content-Duration response headers is what has worked for me.

The X-Content-Duration header tells clients what the duration of an ogg file is, in seconds. Here's some more info about it https://developer.mozilla.org/en-US/docs/Configuring_servers_for_Ogg_media.

Each frame of an ogg file might be encoded with a variable number of bits, so just knowing the file size in bytes doesn't tell you the file length in seconds. You can tell clients this explicitly for ogg vorbis files with the X-Content-Duration header.

来源：https://stackoverflow.com/questions/13170411/audio-element-with-controls-trackbar-not-moving

标签

php