解决 Apple 设备不能自动播放 Audio 问题

在 safri 里面明确指出等待用户的交互动作后才能播放 media,也就是说如果你没有得到用户的 action 就播放的话就会被 safri 拦截,所以我们要用一些事件来控制
touchstart 事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove 事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用 preventDefault() 事件可以阻止滚动。
touchend 事件:当手指从屏幕上离开的时候触发。
touchcancel 事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。

先要去监听 touchstart 事件,当用户触摸屏幕的时候去执行 playAudio 方法,同时监听播放事件,播放的时候移除 touchstart 的监听。

 var audio = document.getElementById("audio");
 window.addEventListener('touchstart', playAudio, false);
 audio.addEventListener('play', function () {
    window.removeEventListener('touchstart', playAudio, false);
}, false);

function playAudio() {
    if (audio.paused) {
        audio.load();
        audio.play();
    } else {
        audio.pause();
    }
}

你可能感兴趣的:(解决 Apple 设备不能自动播放 Audio 问题)