微信端开发H5页面的时候，audio标签在苹果机上无法进行自动播放

所遇问题

在微信端开发H5的时候，audio标签在苹果机上无法进行自动播放

原因分析及解决方案

<audio controls="controls" id="music" loop="loop">
<source src="./assets/sound/music.mp3" type="audio/ogg" />
<source src="./assets/sound/music.ogg" type="audio/ogg" />
</audio>

这是我html上的代码，经过运行发现android机上能够良好的呈现并播放，但是在苹果机上呈现的是一条白杠和一个无法使用的三角形按钮。
使用Audio标签的属性进行检测

Media = document.getElementById("music");
alert(Media.networkState);// 状态码显示为3，表示Audio没有找到资源路径

于是尝试使用js去注入一个路径，发现苹果机的音乐播放问题被解决了

Media.src = "./assets/sound/music.mp3"; 
Media.play();

问题拓展

毕竟我和大家遇到的问题不一样，也许这个方法并不能解决大家的问题。这里拓展一下其他的实现方法。
1. 应该是出于IOS系统本身的设计规范缘故，会不允许音乐的自动播放功能。这里我们可以给页面一个touch事件来触发播放功能。
2. 微信自己提供了一个WeixinJSBridgeReady事件，我们可以监听这个事件触发播放功能。微信官方API

document.addEventListener("WeixinJSBridgeReady", function () {
Media.play();
}, false);

最后

以上就是甜美中心为你收集整理的微信端开发H5页面的时候，audio标签在苹果机上无法进行自动播放的全部内容，希望文章能够帮你解决微信端开发H5页面的时候，audio标签在苹果机上无法进行自动播放所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。