M4A 文件不在 Safari 中播放，但在 Chrome 中播放答案

【问题标题】：M4A File Not Playing in Safari But Does Play in ChromeM4A 文件不在 Safari 中播放，但在 Chrome 中播放
【发布时间】：2020-04-04 00:17:24
【问题描述】：

我在<audio> 标签中有一个 MP3 和一个 M4A 文件。 MP3 文件在 Safari 和 Chrome 中播放良好，M4A 文件在 Chrome 中播放良好，但 M4A 在 Safari 中无法播放。我可以在 Safari 中看到 M4A 的音频控件。我点击播放图标，但没有任何反应。

即使是在 Safari 中播放良好的 MP3 文件，当我单击“网络”选项卡时，我也会看到“尝试加载资源时发生错误”。预览选项卡中的消息。我注意到在 Chrome 中，传输编码作为分块返回，但在 Safari 中它是身份。

MP3 响应 - 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 响应 - 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 响应 - 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

【问题讨论】：

标签： javascript html safari web-audio-api

【解决方案1】：

我解决了这个问题，将两个源 URL 放在音频标签上；同一个URL，读取编码的方式不同：

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

提供响应的服务器应具有标头 Accept-Ranges，以传输由多个部分分块的文件。您可以在此答案中看到更多信息：Does iPhone/iPad Safari require 'Accept-Ranges' header for video?

希望对您有所帮助。

【讨论】：