在 safri 里面明確指出等待用戶的交互動作后才能播放 media棘幸,也就是說如果你沒有得到用戶的 action 就播放的話就會被 safri 攔截,所以我們要用一些事件來控制
touchstart 事件:當手指觸摸屏幕時候觸發(fā)概耻,即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)猫缭。
touchmove 事件:當手指在屏幕上滑動的時候連續(xù)地觸發(fā)麻养。在這個事件發(fā)生期間,調(diào)用 preventDefault() 事件可以阻止?jié)L動罩锐。
touchend 事件:當手指從屏幕上離開的時候觸發(fā)奉狈。
touchcancel 事件:當系統(tǒng)停止跟蹤觸摸的時候觸發(fā)。關(guān)于這個事件的確切出發(fā)時間涩惑,文檔中并沒有具體說明仁期,咱們只能去猜測了。
先要去監(jiān)聽 touchstart 事件竭恬,當用戶觸摸屏幕的時候去執(zhí)行 playAudio 方法跛蛋,同時監(jiān)聽播放事件,播放的時候移除 touchstart 的監(jiān)聽痊硕。
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();
}
}