在 iOS Safari中假装自动播放 HTML5 audio(音乐) 的正确方式

2018-01-28 分类：HTML/CSS 作者：管理员阅读（12207）

做过移动端音乐播放器的同学可能都会发现，在安卓上页面刷新后可以做到自动播放的播放器在苹果手机上就不行，其实这是因为苹果系统的机制限制，那么我们应该怎么解决呢？核心原理: 通过一个用户交互事件来主动 play 一下 audio，完整代码如下：

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>

在线一览

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」