vue背景音频播放以及failed because the user didn‘t interact with the document first问题

先说一下报错的原因
在用户没有任何操作的情况下直接播放背景音乐是不行的,有的浏览器支持有的不支持。错误的意思是,在尝试访问用户的文件系统或数据库之前,用户未与文档进行任何交互。

背景音频的使用

第一种

javascript 复制代码
<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('按下键盘键码:');
    //   });
},

第二种

javascript 复制代码
mounted() {
  //当鼠标点击后就有了交互事件,再获取音频播放
   document.addEventListener('click', (event) =>{
	 let audio = new Audio();
	 audio.controls = false; //这样控件才能显示出来
	 audio.src = 'xxxxx.mp3'; //音乐的路径
	 document.body.appendChild(audio);
	 audio.play();
 })
}
相关推荐
炒毛豆18 分钟前
vue3.4中的v-model的用法~
前端·vue.js
站在巨人肩膀上的码农20 分钟前
全志T507 音频ALSA核心层注册流程分析
驱动开发·音视频·安卓·全志·alsa·声卡
前端康师傅20 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang39 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best66642 分钟前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼1 小时前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
每天开心1 小时前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt1 小时前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅1 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水2 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js