M4A 文件无法在 Safari 中播放，但在 Chrome 中播放

Question

I have an MP3 and a M4A file in <audio> tags. The MP3 file plays fine in Safari and Chrome and the M4A file plays fine in Chrome, but the M4A doesn't play in Safari. I can see the audio controls in Safari for the M4A. I click on the play icon, but nothing happens.

Even for the MP3 file that plays fine in Safari, when I click on the Network tab, I see a "An error occurred trying to load resource." message in the Preview tab. I noticed that in Chrome, the Transfer Encoding is coming back as chunked but in Safari it's Identity.

MP3 response - Safari:

HTTP/1.1 200 OK
Content-Type: audio/mpeg
Content-Disposition: inline; filename=Audio.mp3
X-XSS-Protection: 1
Transfer-Encoding: Identity
Date: Sat, 04 Apr 2020 00:10:29 GMT
Connection: keep-alive
X-Content-Type-Options: nosniff
Accept-Ranges: bytes
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
X-RequestID: undefined
X-Permitted-Cross-Domain-Policies: none
Strict-Transport-Security: max-age=3600

M4A Response - Safari:

Response
HTTP/1.1 200 OK
Content-Type: audio/mp4
Content-Disposition: inline; filename=Audio.m4a
X-XSS-Protection: 1
Transfer-Encoding: Identity
Date: Sat, 04 Apr 2020 00:10:29 GMT
Connection: keep-alive
X-Content-Type-Options: nosniff
Accept-Ranges: bytes
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
X-RequestID: undefined
X-Permitted-Cross-Domain-Policies: none
Strict-Transport-Security: max-age=3600

M4 Response - Chrome

Accept-Ranges: bytes
Connection: keep-alive
Content-disposition: inline; filename=Audio.m4a
Content-Type: audio/mp4
Date: Sat, 04 Apr 2020 00:15:02 GMT
Strict-Transport-Security: max-age=3600
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Powered-By: Express
X-RequestID: undefined
X-XSS-Protection: 1

Answer 1

I solved this putting two sources URL's on audio tag; the same URL with different's way to read the encoding:

<audio controls>
    <source src="{.URL}" type="audio/ogg">
    <source src="{.URL}" type="audio/mp4">
</audio>

The server that give the response should have the header Accept-Ranges, to transfer the file chunked by several parts. You can see more on this answer: Does iPhone/iPad Safari require 'Accept-Ranges' header for video?

I hope that this help.