【前端 ios】audio不能在苹果手机正常播放

在项目中用到了audio组件播放音频，在安卓上播放都是正常的，在 ios 的 safari 浏览器中却不能正常播放音频

 

原因：

---

由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio。故需要用户通过手动触摸的方式(如 click touch)激活播放audio

 

解决方式：

---

index.html:

<audio id="music" class="media-audio" src="src.mp3" preload loop="loop"></audio >

方法一、主动调用，先播放后暂停

index.js:

// 初始化时主动调用
(function () {
    $("#music").load();
    $("#music").pause();
}())

方法二、监听点击事件，事件中初始化音频

// 使用one绑定事件，触发一次即解绑
$(document).one('click touchstart', document.body, function () {
    let audios = document.getElementsByTagName('audio');
    for (let i = 0, len = audios.length; i < len; i++) {
        audios[i].load();
        audios[i].pause();
    }
});