带有音频标签的 Mp3 在 Safari 中不起作用答案

【问题标题】：Mp3 with audio tag does not work in safari带有音频标签的 Mp3 在 Safari 中不起作用
【发布时间】：2018-02-21 01:02:05
【问题描述】：

我正在尝试使用标签在页面中播放 mp3。该网站基于WordPress。音频播放器不会出现在 safari 中，但可以在其他浏览器中使用。

这是页面网址：http://soundhealingcenter.com/love/braintests/

这是我尝试使用的代码：

<audio controls="controls">
    <source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>

【问题讨论】：

标签： html safari wordpress-theming html5-audio

【解决方案1】：

音频播放器*确实出现在 Safari 中，并且可以正常播放音频。似乎所有音频都是同时加载的，由于每个音频大约需要 20 分钟，这需要很多时间，还取决于连接速度。在我的情况下，第二个首先完成加载，然后是 4、5、9、10。其他的仍在加载（因此还不能启动）。

因此，您可能需要考虑通过将属性preload="none" 添加到audio 标记来停用页面加载时的自动加载，这样就可以了

<audio controls="controls" preload="none">
    <source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>

【讨论】：

【解决方案2】：

我也遇到过这样的问题，通过在音频标签中预加载 attr 来修复它。由于我的音频文件很小，所以我使用了 preload = auto。只有在下载完整的音频后，Safari 才会开始播放。这是我的 Ref:https://codepen.io/aravi-pen/pen/OxPaVb.You 可以参考这里了解有关预加载标签的更多信息：https://html.com/attributes/audio-preload/

Thanks!

【讨论】：