關於html5 audio 標籤在ios系統上不能正常自動播放的解決辦法

時間 2019-11-11

標籤關於 html5 html audio 標籤 ios 系統不能正常自動播放解決辦法欄目 HTML5 简体版

原文原文鏈接

因爲 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 一下html

<!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>