javascript - 通过 PHP 流式传输时，Safari 中的音频持续时间总是返回无穷大

Question

出于某种原因，在 Safari(而不是其他主要浏览器)中，当我通过 JavaScript 中的 Audio 上下文通过 PHP 提供 MP3 服务时，MP3 的持续时间始终返回为 infinity。

这个问题在过去几天一直困扰着我，在阅读了几个链接(包括 this 一个)以寻找解决方案后，我一点进展都没有。

---

我的代码

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 发送的第一个请求包含 header :

Range: bytes=0-1

“正确”响应是您的工作，这样 Safari 就会发送额外的请求来获取文件的其余部分。

这是我的“正确” header 示例:

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 发送了一个包含这个 header 的跟进请求:

Range: bytes=0-8468

并且您应该像使用这些 header 一样“正确”响应:

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

我希望这能为您解决问题，因为我花了很多时间搜索都无济于事。我最终意识到我需要调整我的服务器以处理存在 Range header 的请求。

我使用此提交帮助我理解“正确”响应是什么:https://github.com/jooby-project/jooby/commit/142a933a31b9d8742714ecd38475d90e563314f7