如何解决浏览器音视频video/audio设置自动播放autoplay无效问题？

问题背景：

项目需要在用户初始化登录进去时，查看消息列表，有消息则需提示消息提示音，这就需要解决浏览器音视频无法设置自动播放问题。

解决方案：

1、首先造成这个问题的原因在于chrome浏览器为了防止网页广告，在2018年取消了自动播放功能，需要手动配置。

配置分新旧版本：

• 旧版本：

        （1）在浏览器搜索框中输入：chrome://flags/        （2）在上图页面搜索框中输入 Autoplay 搜索

（3）找到  Autoplay policy 项，将默认值  Default  修改成下拉框中  No user gesture is required

 （4）点击右下角  Relaunch Now  按钮，保存设置即可。

• 新版本：

    针对新版本，在上述第二步搜索 Autoplay 会搜索不到，如下图，

        此时，可 点击页面地址栏左侧符号，将下图  麦克风  和  声音  都改为  允许  即可，如下图

 

 2、配置了解决浏览器禁止autoplay政策后，问题并没有解决，这个时候使用 video/audio 会发现，报错如下：

 这个报错，是需要先有实质的界面上的dom操作，才可以正常播放（随便在界面上点一下，既可以正常播放，但一定要有这个点击或是其他操作了dom的动作），显然还是无法满足我们初始化播放的需求。

---

（分割线，下方一定要看）

在经历了上面的问题后，接下来回归正题：

（1）第一步，新建一个div容器，如下：

<div id='audioPay'></div>

注意：不要设置display:none；否则会无法播放声音，可以对音频设置hidden属性

（2）js中向容器中插入音频容器：

function play(src,type){
			$("<embed id='embVoice' name='embed_"+type+"' src='"+src+"' autostart=true  hidden=true muted='muted'></embed>").appendTo("#audioPay");
			var interTimePay = setInterval(function (){
				try{
					var embedVoice = document.getElementById('embVoice');
					if (!embedVoice) {
						$("<embed id='embVoice' name='embed_"+type+"' src='"+src+"' autostart=true  hidden=true muted='muted'></embed>").appendTo("#audioPay");
					}
					setTimeout(function() {
						$('#embVoice').remove();
					}, 9000)
				}catch(e){
					console.log("播放声音出现异常！", e);
				}
			},10000);
        }
		var src="video.mp3";
		var type="type";
		play(src,type);

 这里用的是 embed 媒体标签，原理是，播放的时候插入embed 标签，不需要播放的时候移除 embed 标签。

 

以上，便可以完美实现初始化播放音频了，视频同理，且测试过360浏览器极速和兼容模式，都可以完美播放哦~

@有用的话，给个小心心♥(ˆ◡ˆԅ)吧~@