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();
 })
}
相关推荐
csdn_aspnet6 分钟前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
电子科技圈15 分钟前
SmartDV推出先进的H.264和H.265视频编码器和解码器IP
音视频·h.265·h.264
【ql君】qlexcel29 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟2 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor2 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter2 小时前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript