所遇问题

在微信端开发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>1234

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

使用Audio标签的属性进行检测

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

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

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

问题拓展

毕竟我和大家遇到的问题不一样，也许这个方法并不能解决大家的问题。这里拓展一下其他的实现方法。

1. 应该是出于IOS系统本身的设计规范缘故，会不允许音乐的自动播放功能。这里我们可以给页面一个touch事件来触发播放功能。

2. 微信自己提供了一个WeixinJSBridgeReady事件，我们可以监听这个事件触发播放功能。微信官方API

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

--

来源：切图网（qietu.com）