MP3 file's duration infinity in desktop / iOS SAFARI

Admin 1
Viewed 714

I am trying to play this audio file in a native html5 audio tag. IN DESKTOP SAFARI / iOS SAFARI

here is the link to the file: https://primetime.a.bluejeans.com/a2m/static/6a1ea7f4ef34458f0b9b/static/a2m_player/intro_bgm.mp3

Now, it has a couple of issues:

  1. The duration is INFINITY ( checked after loadedmetadata event, and also after every timeupdate.

  2. The audio doesn't play fully, it stops abruptly with NO errors at random times, ex at 50th second / 72nd second. the last event in this case is timeupdate only.

  3. Html5 media tag's controls show "Live Broadcast". ( in the UI I mean )

below are the request and responses recorded from Charles (2 requests/responses):

REQUEST 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

RESPONSE 1 (showing only header):

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

REQUEST 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

RESPONSE 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

CHECK OUT THE ISSUE LIVE: https://jsfiddle.net/y7whr25a/2/

Also please note that I have tried many answers from the web such as checking if server supports Range Requests (yes it does) and adding Range / Content Length / Accepted Ranges / 206 http response code By rewriting request/response in Charles but nothing worked, I'm about to lose all hope.

here is the same file but hosted on google drive, THIS WORKS IDK HOW: https://drive.google.com/u/1/uc?id=1b6UcqEb5_opUIR2eLzMghtAIQGYV2q8f&export=download

html5-audio html5-video amazon-s3 javascript
1 Answers

Your file is not properly built and misses metadata information telling the duration. You should reencode it properly if you want it to work everywhere.

Chrome and Firefox (actually ffmpeg) are able to estimate this duration from the bitrate, but even then, it may be inacccurate.

But the problem with Safari is that your server doesn't accept Range requests. Somehow, Safari switches to stream player in this case.

One way to make this browser be able to read this file entirely without changing the server config is to first fetch it entirely as a Blob, and to generate a blob:// URI from there:

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

user_37027970
Related