關於html5 audio 標簽在ios系統上不能正常自動播放的解決辦法
阿新 • • 發佈：2017-09-18
mini function 必須 listener 解決 right rip 方式 主動 
由於 iOS Safari 限制不允許 audio autoplay, 必須用戶主動交互(例如 click)後才能播放 audio, 因此我們通過一個用戶交互事件來主動 play 一下 audio.
這個坑相信大家都已經踩過了, 在 iOS 9 沒出現以前, 這樣的 hack 方案還是妥妥的.
但 iOS 9 出現後, 發現這個方案"失效"了.
沒有辦法, 看來是時候升級一下 hack 方案了, 於是仔細看了下 audio 的事件.
對於能夠自動播放時事件的順序如下
loadstart -> loadedmetadata -> loadeddata -> canplay -> play -> playing
對於不能自動播放時觸發的事件因系統版本不同而不同
* iPhone5 iOS 7.0.6 loadstart
* iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
最終發現相比原來的 hack 方案, 對於 iOS 9 還需要額外的 load 一下, 否則直接 play 不能讓 audio 開始播放.
audioEl.load(); // iOS 9
audioEl.play(); // iOS 7/8 僅需要 play 一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Fake auto play html audio in iOS Safari the right way</title>
</head>
<body>
<h1>在 iOS Safari 中假裝自動播放 HTML5 audio(音樂) 的正確方式</h1>
<p>核心原理: 通過一個用戶交互事件來主動 play 一下 audio</p>
<br>
<br>
<br>
<audio id="bgmusic" autoplay preload loop controls></audio>
<script>
(function() {
function log(info) {
console.log(info);
// alert(info);
}
function forceSafariPlayAudio() {
audioEl.load(); // iOS 9 還需要額外的 load 一下, 否則直接 play 無效
audioEl.play(); // iOS 7/8 僅需要 play 一下
}
var audioEl = document.getElementById(‘bgmusic‘);
// 可以自動播放時正確的事件順序是
// loadstart
// loadedmetadata
// loadeddata
// canplay
// play
// playing
//
// 不能自動播放時觸發的事件是
// iPhone5 iOS 7.0.6 loadstart
// iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
audioEl.addEventListener(‘loadstart‘, function() {
log(‘loadstart‘);
}, false);
audioEl.addEventListener(‘loadeddata‘, function() {
log(‘loadeddata‘);
}, false);
audioEl.addEventListener(‘loadedmetadata‘, function() {
log(‘loadedmetadata‘);
}, false);
audioEl.addEventListener(‘canplay‘, function() {
log(‘canplay‘);
}, false);
audioEl.addEventListener(‘play‘, function() {
log(‘play‘);
// 當 audio 能夠播放後, 移除這個事件
window.removeEventListener(‘touchstart‘, forceSafariPlayAudio, false);
}, false);
audioEl.addEventListener(‘playing‘, function() {
log(‘playing‘);
}, false);
audioEl.addEventListener(‘pause‘, function() {
log(‘pause‘);
}, false);
// 由於 iOS Safari 限制不允許 audio autoplay, 必須用戶主動交互(例如 click)後才能播放 audio,
// 因此我們通過一個用戶交互事件來主動 play 一下 audio.
window.addEventListener(‘touchstart‘, forceSafariPlayAudio, false);
audioEl.src = ‘http://www.w3school.com.cn/i/song.mp3‘;
})();
</script>
</body>
</html>關於html5 audio 標簽在ios系統上不能正常自動播放的解決辦法