MP3 文件在桌面上的持續時間無窮大 / iOS SAFARI

Question

我正在嘗試在原生 html5 音頻標簽中播放此音頻文件。 在桌面 SAFARI / iOS SAFARI

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

現在，它有幾個問題：

1. 持續時間是INFINITY （在加載元數據事件之后檢查，並且在每次loadedmetadata之后timeupdate 。

2. 音頻沒有完全播放，它在隨機時間突然停止，沒有錯誤，例如在第 50 秒/第 72 秒。 在這種情況下，最后一個事件只是timeupdate 。

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/

另請注意，我已經嘗試了 web 的許多答案，例如檢查服務器是否支持范圍請求（是的）並添加范圍/內容長度/接受范圍/206 http 響應代碼通過在查爾斯中重寫請求/響應但沒有任何效果，我快要失去所有的希望了。

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

Answer 1

您的文件未正確構建，並且缺少說明持續時間的元數據信息。 如果您希望它在任何地方都能正常工作，您應該正確地重新編碼它。

Chrome 和 Firefox （實際上是 ffmpeg）能夠從比特率估計這個持續時間，但即便如此，它也可能不准確。

但是 Safari 的問題是您的服務器不接受 Range 請求。 在這種情況下，不知何故，Safari 切換到 stream 播放器。

使該瀏覽器能夠在不更改服務器配置的情況下完全讀取此文件的一種方法是首先將其完全作為 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 ) ); })();