在 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();
}
}