標籤：maximum col mp3 school window ada oct oop The
<!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不能自動播放的問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
