安卓版微信,audio 标签不能一个接一个的播放,复制链接到其他浏览器是可以的?
在微信中,播放完第二个音频就不会再继续播放了。也就是第一二条都能播放,第三条end 回调函数中,play 就播放不了了。
可复制这个链接到手机上看看效果。苹果手机和安卓的其他浏览器都可以播放,就安卓微信中无法一个接一个的播放。
想实现的效果其实就是音乐库中,列表顺序播放的功能。不想创建很多个audio,因为audio的其他事件都绑定了一些更新页面状态的回调函数。如果创建多个audio,岂不是需要每一个audio 都绑定回调函数。
http://www.zhanghoo.com/audio_play.html
window.onload = function(){
var arr = [
"http://www.zhanghoo.com/audio_play/8f0bd145-c691-4299-9d91-8379f72f8afd.mp3",
"http://www.zhanghoo.com/audio_play/e14dfd4f-5b43-4f2f-b93a-dffec6885bcf.mp3",
"http://www.zhanghoo.com/audio_play/aa5e1c41-7aac-4302-807c-06115f7b72e4.mp3",
"http://www.zhanghoo.com/audio_play/224b6ef5-eda7-4d58-8b60-896ca506b743.mp3",
"http://www.zhanghoo.com/audio_play/147e2aef-e1ec-4d80-9429-3e6b78bf3df5.mp3"
];//把需要播放的歌曲从后往前排,这里已添加两首音乐,可继续添加多个音乐
var myAudio = new Audio();
myAudio.preload = true;
myAudio.controls = true;
myAudio.src = arr.pop(); //每次读数组最后一个元素
myAudio.addEventListener('ended', playEndedHandler, false);
// myAudio.play();
document.getElementById("audioBox").appendChild(myAudio);
myAudio.loop = false;//禁止循环,否则无法触发ended事件
function playEndedHandler(){
myAudio.src = arr.pop();
console.log('播放下一个', myAudio.src);
myAudio.play();
console.log(arr.length);
!arr.length && myAudio.removeEventListener('ended',playEndedHandler,false);//只有一个元素时解除绑定
}
}
参考如下链接。这个功能被改成这样太让人疑惑了,所有其他移动浏览器第一次支持点击屏幕/按钮播放,但后面的音频不需要点击也可以播放。
https://developers.weixin.qq.com/community/develop/doc/000e640d77cfa001132a6cb8456c01?highLine=7.0.15%25E7%25BD%2591%25E9%25A1%25B5%25E6%2592%25AD%25E6%2594%25BE%25E9%259F%25B3%25E9%25A2%2591
https://developers.weixin.qq.com/community/develop/doc/0006644b5f8ec88ee67a2250a5bc00?highLine=%25E9%259F%25B3%25E9%25A2%2591