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();
 })
}
相关推荐
东方佑20 小时前
从音频到Token:构建原神角色语音识别模型的完整实践
人工智能·音视频·语音识别
华仔啊20 小时前
前端登录token到底应该存在哪?LocalStorage、SessionStorage还是Cookie?一篇说透!
前端·javascript
猫林老师21 小时前
HarmonyOS多媒体开发:音视频播放与录制全解析
华为·音视频·harmonyos
懒大王952721 小时前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
xkroy21 小时前
ajax
前端·javascript·ajax
Yvonne爱编码21 小时前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
Swift社区1 天前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript
清风细雨_林木木1 天前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
BillKu1 天前
Vue3应用执行流程详解
前端·javascript·vue.js
欧阳天风1 天前
链表运用到响应式中
javascript·数据结构·链表