<audio> 元素与控件的轨迹栏不移动

Posted 2023-02-24

【中文标题】<audio> 元素与控件的轨迹栏不移动

【英文标题】：<audio> element with controls' trackbar not moving

【发布时间】：2012-11-01 03:10:27

【问题描述】：

我有一个带有如下控件的 <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.

【问题讨论】：

与readfile()相比，显式发送文件内容有什么好处？

@alex：没有，我不知道readfile 存在。谢谢！ （我现在就试试Content-Length 的东西。我不认为它曾经奏效过，但谁知道呢！）

@alex: Content-Length 工作得很好。啊，对不起！请将其发布为答案:)

【参考方案1】：

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

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

由于某种原因，如果没有预先提供这些信息，它就无法进行必要的数学运算来放置轨迹栏。

【讨论】：

实际上，尽管您仍然可以在 Firefox 上进行搜索（在已播放的区域中），但曲目缩略图会开始并停留在栏的末尾。有什么想法吗？

@minitech 我不确定很抱歉，我没有过多地使用audio 元素。不过我会看看。

由于 Apache 将 Content-Length 标头替换为 Transfer-Encoding: chunked;我无法让搜索栏正常工作。有什么办法可以解决这个问题？

【参考方案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);

【讨论】：

我刚碰到这个，看起来header('Accept-Ranges: bytes'); 为我解决了这个问题！我从您与此问题相关的问题中得到了线索。显然，所有用户代理都存在一些实现问题:(

【参考方案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

通过这种方式请求 URL Firefox 立即停止播放音频

问题

因为您之前曾尝试使用Zero Content-Length 流式传输内容，这仍然是您的音频不付费的原因..... Firefox 已缓存初始无效内容

解决方案

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

无效的相对位置

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

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

【讨论】：

谢谢，这确实是其中的一部分！但是现在它显示了相对于到目前为止缓冲的当前位置，并且它似乎不想提前缓冲所有这些，大约一秒钟。有什么想法吗？

Firefox 仅具有缓存音频文件的有效相对位置...如果您第二次播放音频，您会注意到相对位置已固定...解决方案 .. 删除 mt_rand，您将很好....

我没有添加随机数进行测试 - 它仍然只显示相对于前五秒左右的位置。

@minitech ...在第二次播放音频后，它会做同样的事情吗？

在没有 PHP 的情况下使用 <source src="audio.ogg" type="audio/ogg" /> 并检查它是否相同.. 你使用的是什么版本的 firefox

【参考方案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 文件，您可以明确告诉客户这一点。