1. 程式人生 > >【轉】ios下audio不能自動播放的問題

【轉】ios下audio不能自動播放的問題

IE 能夠 mov audio head clas cli script device

<!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> <audio id="bgmusic" autoplay preload loop></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>

看了下代碼,大概是因為ios內置的系統會攔截audio的自動播放,所以需要一個交互,這個代碼的交互就是當屏幕被touchstart之後開始加載音樂然後播放.轉需

【轉】ios下audio不能自動播放的問題