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

最後更新：2017-09-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：device ada 使用者互動代碼 top 標籤一個 sch viewport

由於 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系統上不能正常自動播放的解決辦法

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More