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

Question

我正在尝试在本机 html5 音频标签中播放此音频文件。在桌面 SAFARI / iOS SAFARI中

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

现在，它有几个问题：

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

2. 音频无法完全播放，它在随机时间突然停止且没有错误，例如在第 50 秒/第 72 秒时。本例中的最后一个事件是timeupdate唯一的。

3. Html5媒体标签的控件显示“直播”。（我的意思是在用户界面中）

以下是 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响应代码通过在 Charles 中重写请求/响应但没有任何效果，我快要失去所有希望了。

这是相同的文件，但托管在谷歌驱动器上，这如何工作： 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 )
  );
})();