1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
| <!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 > |
共 0 条评论关于"在 iOS Safari中假装自动播放 HTML5 audio(音乐) 的正确方式"
最新评论