微信端开发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没有找到资源路径

更多关于Audio标签的属性和方法，可点击此处

于是尝试使用js去注入一个路径

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

发现苹果机的音乐播放问题被解决了

如果问题没有被解决请参考以下这篇文章 
解决ios下的微信页面背景音乐无法自动播放问题

解决办法

html:
<audio controls="controls" id="music" loop="loop" style="display: none"> <source src="./assets/sound/music.mp3" type="audio/ogg" /> <source src="./assets/sound/music.ogg" type="audio/ogg" /> </audio> js: Media = document.getElementById("music"); Media.src = "./assets/sound/music.mp3"; Media.play();

问题总结

个人猜测：苹果手机对静态标签的src支持可能不太友好, 需要js注入路径才能播放（纯属新手的个人猜测，希望有朋友能正确引导我） 
问题扩展：曾经有一段时间是苹果机的音乐能够播放，android机不能播放，至今未找到原因，如果有人知晓关于audio的更多知识，还请不吝赐教

转载于:https://www.cnblogs.com/aim-at-is-the-tao-in/p/6387346.html