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

Question

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

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

现在，它有几个问题：

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

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

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

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