我记得之前在一次项目中，出现过浏览报错：
所以在这次H5的制作中，我使用了iframe来加载音频文件，使用这种方式后，电脑端是没有问题的，但是当上传至服务器上在手机上浏览时，会出现点击音乐旋转按钮无法暂停播放音乐(使用iframe之后相当于一个子文档#document，但是我也找到方法获取子文档中的audio元素了，但是不知道为什么点击按钮后，暂停播放功能无法生效)、ios浏览器中音乐无法自动播放...等等问题
然后迫不得已，我重新换成了audio标签，然后重新载浏览器中运行，果然出现了第一次项目中的报错信息，但是很莫名的是，手机端居然能够正常自动播放音乐了，除了ios微信端(因为是H5页面，所以只测了微信，但是安卓的微信浏览器和其它浏览器是可以的)。
那么接下来就是要解决ios微信端无法自动播放的问题。
百度了很多方法，如下：
1、js中当文档加载完毕后，获取audio元素，然后调用audio.play()方法：
window.load = function(){
const audio= document.getElementByTagName('audio')[0];
audio.play();
}运行结果：无效。报错Uncaught(in promise) DOMException
2、有小伙伴说明，ios为了节省用户流量等，对于自动播放中块管控很严格，必须要用户交互后才可以调用audio.play()方法。所以我们就添加了触摸屏幕的事件：
document.addEventListener('touchstart', function() {if(key) {
audio.play();
audio.loop= true;
key= false;
}
})运行结果：不能根本解决。相当于就是要通过用户触摸屏幕后才能播放音乐，但这个是治标不治本，如果用户没有一打开就触摸屏幕，那就会一很长一段时间都没音乐。
3、WeixinJSBridge接口解决微信中时候视频和音频自动播放问题：
function audioAutoPlay(id) {
let audio = document.getElementById(id);
// 并不一定非要用ID获取，class值获取也可以
audio.play();
// 为了保险起见 这里页也手动调用一下
audio.loop = true;
// 如上 为了音乐能够循环播放
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
audio.loop = true;
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
// 暂时还不知道Yixin是什么东西...
audio.play();
audio.loop = true;
}, false);
}
audioAutoPlay(id);
// 传入audio标签的id值运行结果：解决。这个是微信场景专门提供的api方法，可以解决ios中音视频不能自动播放背景音乐的bug...
不过这个也还是有一点问题，就是总感觉ios比安卓背景音乐播放反应有点迟钝。安卓基本一打开就有音乐，但是ios差不定多要等三秒左右，也不知道是什么问题...
【补充知识】
