这个问题是今天在处理一些私事的时候遇到的。特此记录下来,帮助其他人避免遇到类似的尴尬。
1.常规方法:
正常的情况下,在<audio>
标签中,写入音频地址(local or remote),再辅以preload/autoplay属性基本就可以正常在Safari中播放了。需要注意的是,音频地址中的实际音频文件必须是要正确格式的。常见的非正确格式有:a.m4a
,直接给改后缀为a.mp3
。这样的文件在Safari都播放不了的。
此时可以使用
a.格式工厂进行正常文件的转化;
b.使用七牛后台进行文件转化。[关于这个后续也会写个专门的文章进行描述]
<audio id="love_music" src="http://o8g0miqfw.bkt.clouddn.com/love_you.mp3" autoplay controls></audio >
在上面例子中,加入controls属性是为解决占用iOS/android空间问题。
2.暴力方法:
在常规方法的基础上。通过监听具体的事件,然后模拟播放。
//监听具体的事件然后模拟播放
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById('love_music');
audio.play();
//在iOS的微信中播放的话可以监听微信的read事件
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});