移动设备下audio标签无法自动播放的问题

HTML 5 <audio> 标签可以进行音频播放,配合autoplay属性可以自动播放,如下代码。

<audio id="audios" muted autoplay = "autoplay" type = "audio/mpeg">
            <source src="../addons/ewei_shopv2/static/invite/Free-Converter.com-1_1-43433118.ogg" type="audio/ogg">
            <source src="../addons/ewei_shopv2/static/invite/1_1.mp3" type="audio/mpeg">
            当前浏览器不支持audio
        </audio>

上述代码再PC浏览器工作正常,但在手机上就没有办法自动播放音频。搜索得知,大部分手机浏览器考虑到流量问题,默认是不允许音频或视频自动播放的。

解决办法 - iframe加载

部分手机浏览器是允许通过iframe加载音频并自动播放,代码如下(测试微信、QQ浏览器有效)

<iframe style="display: none;" src="../addons/ewei_shopv2/static/invite/1_1.mp3" width="" height="" allow = "autoplay"></iframe>

解决办法 - AudioContext

AudioContext是一个WEB API,可以实现音频播放,代码如下(在夸克、UC等浏览器工作正常)

//尝试自动播放音乐
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
try {
var context = new window.AudioContext();;
var source = null;
var audioBuffer = null;
function stopSound() {
if (source) {
source.stop(0); //立即停止
}
}
function playSound() {
source = context.createBufferSource();
source.buffer = audioBuffer;
source.loop = true;
source.connect(context.destination);
source.start(0); //立即播放
}
function initSound(arrayBuffer) {
context.decodeAudioData(arrayBuffer, function (buffer) { //解码成功时的回调函数
audioBuffer = buffer;
playSound();
}, function (e) { //解码出错时的回调函数
console.log('Error decoding file', e);
});
}
function loadAudioFile(url) {
var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) { //下载完成
initSound(this.response);
};
xhr.send();
}
loadAudioFile('../addons/ewei_shopv2/static/invite/1_1.mp3');
setTimeout("stopSound()",5800);
$("#stop").click(function () {
stopSound();
});
} catch (e) {
console.log('!Your browser does not support AudioContext');
}

但是AudioContext 这货不会自动停止播放(循环播放),即使你把页面关闭了也不会停止播放。因此上述代码添加了setTimeout("stopSound()",5800);指的是5800毫秒之后调用关闭方法。

总结

各家手机浏览器标准并不统一,有的用iframe框架可以播放,有的用AudioContext可以播放,因此可以结合iframeAudioContext一起使用。

参考

标签: audio AudioContext

发表评论: