关于js audio自动播放

100 阅读 0 评论 66 点赞

我是靠谱客的博主深情鸡翅，这篇文章主要介绍关于js audio自动播放，现在分享给大家，希望可以做个参考。

audio自动播放

- 前言
- 正文
- 解决方法

前言

最近公司宣传手册需要加一个背景音乐，需要用到audio标签并且自动播放，开始认为很简单，但是上手才发现浏览器对此做了有些限制。下面让我们一起去看看吧！

正文

Chrome的禁止更加人性化，它有一个MEI的策略，这个策略大概是说只要用户在当前网页主动播放过超过7s的音视频（视频窗口不能小于200 x 140），就允许自动播放。

对于网页开发人员来说，应当如何有效地规避这个风险呢？

Chrome的文档给了一个最佳实践：先把音视频加一个muted的属性就可以自动播放，然后再显示一个声音被关掉的按钮，提示用户点一下打开声音。对于视频来说，确实可以这样处理，而对于音频来说，很多人是监听页面点击事件，只要点一次了就开始播放声音，一般就是播放个背景音乐。但是如果对于有多个声音资源的页面来说如何自动播放多个声音呢？

首先，如果用户还没进行交互就调用播放声音的API，Chrome会这么提示：

DOMException: play() failed because the user didn’t interact with the document first.

解决方法

废话不多说，直接贴代码

复制代码

});
}

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
	<script>
		// 为了防止第二次创建
		let playState= true
		function testAutoPlay () {
    // 返回一个promise以告诉调用者检测结果
        return new Promise(resolve => {
		if(playState){
			        let audio = document.createElement('audio');
        audio.src = "音频地址"
        //循环播放，如果不需要可注释
		audio.loop="loop"
        document.body.appendChild(audio);
        let autoplay = true;
        // play返回的是一个promise
        audio.play().then(() => {
            // 支持自动播放
            autoplay = true;
			console.log("正常播放")
        }).catch(err => {
            // 不支持自动播放
			console.log("不支持播放")
            autoplay = false;
        }).finally((e) => {
            resolve(autoplay);
        });
		playState=false
		}else{
			resolve(false)
		}

    });
}

let audioInfo = {
    autoplay: false,
    testAutoPlay () {
        return testAutoPlay()
    },
    // 监听页面的点击事件，一旦点过了就能autoplay了
    setAutoPlayWhenClick () {
        function setAutoPlay () {
            // 设置自动播放为true
            audioInfo.autoplay = true;
            document.removeEventListener('click', setAutoPlay);
            document.removeEventListener('touchend', setAutoPlay);
        }
        document.addEventListener('click', setAutoPlay);
        document.addEventListener('touchend', setAutoPlay);
    },
    init () {
        // 检测是否能自动播放
        audioInfo.testAutoPlay().then(autoplay => {
            if (!audioInfo.autoplay) {
                audioInfo.autoplay = autoplay;
            }
        });
        // 用户点击交互之后，设置成能自动播放
        audioInfo.setAutoPlayWhenClick();
    }
};
        // PC端
        document.addEventListener('click', ()=>{
	    audioInfo.init();
        });
        // 移动端
         document.addEventListener('touchend', ()=>{
	      audioInfo.init();
         });
	</script>