vue背景音频播放以及failed because the user didn‘t interact with the document first问题
【代码】vue背景音频播放以及failed because the user didn‘t interact with the document first问题。
·
先说一下报错的原因
在用户没有任何操作的情况下直接播放背景音乐是不行的,有的浏览器支持有的不支持。错误的意思是,在尝试访问用户的文件系统或数据库之前,用户未与文档进行任何交互。
背景音频的使用
第一种
<audio id="background-music" style="visibility: visible;" src="xxxxxx.mp3"></audio>
mounted() {
//当鼠标点击后就有了交互事件,再获取音频播放
document.addEventListener('click', (event) =>{
console.log('开始音频')
const audio = document.getElementById('background-music');
audio.play();
})
// document.addEventListener('keydown', function(event) {
// console.log('按下键盘键码:');
// });
},
第二种
mounted() {
//当鼠标点击后就有了交互事件,再获取音频播放
document.addEventListener('click', (event) =>{
let audio = new Audio();
audio.controls = false; //这样控件才能显示出来
audio.src = 'xxxxx.mp3'; //音乐的路径
document.body.appendChild(audio);
audio.play();
})
}
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)