最近在做
vue-music这个项目时,发现在部分浏览器点击播放时发生错误,具体错误为:
Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture
大概的意思就是play()方法只能人为地触发,一开始以为是播放前发送请求的原因,后来发现直接使用audio然后播放还是不行,后来在网上查了一下,发现原来是ios和部分安卓浏览器由于安全机制问题。不允许audio和video自动播放,后来也在stackoverflow上看到了相似的问题,解决思路是:先在audio播放0秒的无声音的音频。根据这个答案就有了以下解决的办法:
先把audio的src写死成0秒的无声音音频,然后通过用户点击页面播放,这样就达到了人为触发audio的效果,进而实现后面的音频播放。
const audio = this.$refs.audio;
audio.play().catch(() => {
this.playError = true;
let event = ["click", "WeixinJSBridgeReady"];// "touchstart"
let pageClick = e => {
if (this.playError) {
this.playError = false;
audio.load();
audio.play().catch(e => {
this.playError = true;
});
event.forEach((item, index) => {
document.removeEventListener(item, pageClick);
});
}
};
event.forEach((item, index) => {
document.addEventListener(item, pageClick);
});
})
最后少了一对})