微信端开发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的更多知识,还请不吝赐教

posted @ 2017-02-10 17:33  志在,道在  阅读(4944)  评论(0编辑  收藏  举报