桌面/iOS SAFARI 中的 MP3 文件持续时间无限

Posted 2023-05-08

【中文标题】桌面/iOS SAFARI 中的 MP3 文件持续时间无限

【英文标题】：MP3 file's duration infinity in desktop / iOS SAFARI

【发布时间】：2021-03-08 13:52:58

【问题描述】：

我正在尝试在原生 html5 音频标签中播放此音频文件。在桌面游猎/iOS游猎

这里是文件的链接：https://primetime.a.bluejeans.com/a2m/static/6a1ea7f4ef34458f0b9b/static/a2m_player/intro_bgm.mp3

现在，它有几个问题：

持续时间是INFINITY（在loadedmetadata 事件之后检查，并且在每个timeupdate 之后检查。

音频没有完全播放，它在随机时间突然停止，没有错误，例如在第 50 秒/第 72 秒。在这种情况下，最后一个事件是 timeupdate only。

Html5 媒体标签的控件显示“直播”。 （我的意思是在 UI 中）

以下是 Charles 记录的请求和响应（2 个请求/响应）：

请求 1：

GET /a2m/static/6a1ea7f4ef34458f0b9b/static/a2m_player/intro_bgm.mp3 HTTP/1.1
Host: primetime.a.bluejeans.com
Accept-Language: en-us
X-Playback-Session-Id: 174A3981-F3E3-4F49-A17B-BEBE88764552
Icy-Metadata: 1
Accept: */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15
Referer: https://fiddle.jshell.net/
Accept-Encoding: identity
Connection: Keep-Alive
Pragma: no-cache
Cache-Control: no-cache

响应 1（仅显示标题）：

HTTP/1.1 200 OK
x-amz-id-2: l4souPN96kHUVyThsqJZHllkVN873tbsPwk80hq94cixXcRKl3CTdO6HS32AbutMLInBSOXAZe8=
x-amz-request-id: 4122A053E2768F35
x-amz-replication-status: COMPLETED
x-amz-version-id: jAKAQ6MTbVed.NthIiH9ZOoLEWHRC95Z
Content-Type: audio/mpeg
Server: AmazonS3
Vary: Accept-Encoding
Date: Wed, 25 Nov 2020 16:43:00 GMT
Transfer-Encoding: chunked
Connection: keep-alive
Connection: Transfer-Encoding
Referrer-Policy: strict-origin-when-cross-origin
Access-Control-Max-Age: 86400
Access-Control-Allow-Credentials: false
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: GET,POST
Access-Control-Allow-Origin: *
Strict-Transport-Security: max-age=86400 ; includeSubDomains ; preload
Expires: 0
Cache-Control: no-cache

请求 2：

GET /a2m/static/6a1ea7f4ef34458f0b9b/static/a2m_player/intro_bgm.mp3 HTTP/1.1
Host: primetime.a.bluejeans.com
Accept-Language: en-us
X-Playback-Session-Id: 174A3981-F3E3-4F49-A17B-BEBE88764552
Icy-Metadata: 1
Accept: */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15
Referer: https://fiddle.jshell.net/
Accept-Encoding: identity
Connection: Keep-Alive
Pragma: no-cache
Cache-Control: no-cache

响应 2：

HTTP/1.1 200 OK
x-amz-id-2: l4souPN96kHUVyThsqJZHllkVN873tbsPwk80hq94cixXcRKl3CTdO6HS32AbutMLInBSOXAZe8=
x-amz-request-id: 4122A053E2768F35
x-amz-replication-status: COMPLETED
x-amz-version-id: jAKAQ6MTbVed.NthIiH9ZOoLEWHRC95Z
Content-Type: audio/mpeg
Server: AmazonS3
Vary: Accept-Encoding
Date: Wed, 25 Nov 2020 16:43:00 GMT
Transfer-Encoding: chunked
Connection: keep-alive
Connection: Transfer-Encoding
Referrer-Policy: strict-origin-when-cross-origin
Access-Control-Max-Age: 86400
Access-Control-Allow-Credentials: false
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: GET,POST
Access-Control-Allow-Origin: *
Strict-Transport-Security: max-age=86400 ; includeSubDomains ; preload
Expires: 0
Cache-Control: no-cache

实时查看问题：https://jsfiddle.net/y7whr25a/2/

另外请注意，我已经尝试了很多来自网络的答案，例如检查服务器是否支持范围请求（是的）并添加范围/内容长度/接受范围/206 http响应代码通过重写请求/响应在查尔斯，但没有任何效果，我即将失去所有希望。

这是相同的文件，但托管在 google 驱动器上，这在 IDK 上是如何工作的： https://drive.google.com/u/1/uc?id=1b6UcqEb5_opUIR2eLzMghtAIQGYV2q8f&export=download

【参考方案1】：

您的文件未正确构建，并且缺少说明持续时间的元数据信息。 如果你想让它在任何地方都能正常工作，你应该正确地重新编码。

Chrome 和 Firefox （实际上是 ffmpeg） 能够根据比特率估计这个持续时间，但即便如此，它也可能不准确。

但是 Safari 的问题是您的服务器不接受 Range 请求。在这种情况下，Safari 不知何故切换到流播放器。

让该浏览器能够在不更改服务器配置的情况下完全读取此文件的一种方法是首先将其完全作为 Blob 获取，然后从那里生成 blob:// URI：

(async () => 
  const src = "https://primetime.a.bluejeans.com/a2m/static/6a1ea7f4ef34458f0b9b/static/a2m_player/intro_bgm.mp3";
  const blob = await fetch( src )
    .then( (resp) => resp.blob() );
  const audio = new Audio( URL.createObjectURL( blob ) );
  audio.controls = true;
  document.body.append( audio );
  audio.addEventListener( "loadedmetadata", (evt) =>
    console.log( audio.duration )
  );
)();

【讨论】：

是的，@Kaiido 先生，这似乎很有效，非常感谢，但我准备重新编码它，问题是我对元数据和实际需要修复的内容不太了解，你能请指导我，以便我可以自行修复音频，由于带宽原因，我无法在播放前下载整个文件...

如果我下载这个文件并上传到驱动器，创建一个谷歌驱动器 url 并使用它，一切正常..

要重新编码，您可以使用任何建议重新编码音频格式的网络服务（有很多）。如果你想自己做，你可以在你的机器上安装 ffmpeg，然后ffmpeg -i intro_bgm.mp3 fixed.mp3。而且我不知道为什么它可以在 GDrive 上工作，也许他们的响应标头有 Safari 更喜欢的东西……也许他们重新编码了它……

哦，实际上primetime.a.bluejeans.com 服务器不接受 Range 请求。我将不得不检查为什么它在我的本地主机上不起作用然后现在它起作用了......，但无论如何你的文件仍然需要重新编码。

是的，这里一样 ;-) 编辑了答案，谢谢跟进