<audio>元素，控件'轨迹栏不移动</audio>

Question

我有一个<audio>元素，其控件如下：

<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>

播放器显示，声音播放得很好，但轨迹栏不会移动以反映已用时间，也无法拖动以进行搜索。为什么不？我需要发送某种额外的标题吗？这是所有相关的PHP，没什么特别的：

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

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

You can see the problem live here.

Answer 1

尝试设置Content-Length标题...

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

出于某种原因，如果没有预先知道该信息，则无法进行必要的数学运算来放置轨迹栏。

Answer 2

让它在Firefox和Safari上工作的诀窍是发送Content-Range标题，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);

Answer 3

我的经历

您的代码没有任何问题。我曾经遇到过这个问题..而且您发现的Firefox和Content-Length上存在一个简单的缓存问题

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();

这在Firefox中100%工作，但是当我将readfile($filename)更改为

时

  readfile("SIMPLE ERROR ERROR");

Firefox sill为我支付音频，而不是不支付任何文件，只是让它意识到错误是在src文件中添加一个随机字符串

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

通过这种方式，请求Firefox火箭立即播放音频

问题

因为您之前尝试使用Zero Content-Length流式播放内容，这是您的音频未支付的原因..... Firefox已缓存初始无效内容

解决方案

清除所有缓存..使用上面的代码，代码应该可以正常工作，或者只是在代码中添加rand参数进行测试

无效的相对位置

永久使用mt_rand()会使Firefox难以缓存导致无效相对解决方案的音频文件。

清除缓存后删除mt_rand，这将得到修复

Answer 4

Content-Type = audio/ogg，Content-Length，Accept-Ranges = bytes和的组合最重要的是，我认为 X-Content-Duration响应标头是有用的我

X-Content-Duration标头告诉客户端ogg文件的持续时间，以秒为单位。以下是有关它的更多信息https://developer.mozilla.org/en-US/docs/Configuring_servers_for_Ogg_media。

ogg文件的每一帧都可能使用可变位数编码，因此只知道文件大小（以字节为单位）不会以秒为单位告诉您文件长度。您可以使用X-Content-Duration标题明确告知客户端ogg vorbis文件。