Safari中的音频持续时间在通过PHP流式传输时始终返回无穷大

Question

出于某些原因，在Safari（没有其他主流浏览器）中，当我通过PHP通过JavaScript中的Audio上下文提供MP3时，MP3的持续时间总是以infinity的形式返回。

这个问题在最近几天让我感到难过，在阅读了一些链接（包括this之一）以寻找解决方案之后，我根本没有取得进展。

---

My code

PHP:

$path = "path/to/file.mp3";
$file = [
    "path"      => $path,
    "size"      => filesize($path),
    "bitrate"   => $bitrate
];

header("Accept-Ranges: bytes", false);
header("Content-Length: " . $file["size"], false);
header("Content-Type: audio/mpeg", false);

echo file_get_contents($file["path"]);

exit;

JavaScript:

var audio = new Audio(url);
// returns infinite on Safari
// returns 312.27311 on Chrome and Firefox (which is correct)
console.log(audio.duration);

---

我还没有弄清楚为什么这个问题只出现在Safari中，并且首先导致它的原因，所以如果有人有解决方案，我将不胜感激！

干杯。

Answer 1

经过大量的调查，我终于明白了。

Safari发送的第一个请求有标题：

Range: bytes=0-1

您的工作是“正确”响应，以便Safari发送其他请求以获取文件的其余部分。

这是我的“正确”标题的示例：

Content-Length: 2
Accept-Ranges: bytes
Content-Range: bytes 0-1/8469
(Make sure you set response status to 206!)
(8469 is the Content-Length of the entire file)

之后发生的事情有些神奇--Safari会发送一个包含此标题的后续请求：

Range: bytes=0-8468

您应该像使用这些标题一样“正确”回复：

Content-Length: 8469
Accept-Ranges: bytes
Content-Range: bytes 0-8468/8469
(Again, status 206!)

我希望这能为你解决，因为我花了很多时间寻找无济于事。我最终意识到我需要调整我的服务器来处理Range标头存在的请求。

我用这个提交来帮助我理解“正确”的反应是什么：https://github.com/jooby-project/jooby/commit/142a933a31b9d8742714ecd38475d90e563314f7