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

问题描述

我正尝试在原生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/

还请注意，我已经尝试了许多来自Web的答案，例如检查服务器是否支持范围请求(是的，它支持)，并通过在Charles中重写请求/响应来添加范围/内容长度/接受的范围/206 http响应代码，但都不起作用，我即将失去所有希望。

这是同一个文件，但托管在Google驱动器上，它的工作原理IDK How：https://drive.google.com/u/1/uc?id=1b6UcqEb5_opUIR2eLzMghtAIQGYV2q8f&export=download

推荐答案

您的文件构建不正确，缺少指示持续时间的元数据信息。 如果希望它在任何地方都适用，则应正确重新编码。

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

但Safari的问题是您的服务器不接受范围请求。在这种情况下，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 )
  );
})();