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();
 })
}
相关推荐
dy17173 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
悟乙己5 小时前
Github | MoneyPrinterTurbo:自动化视频内容生成系统
自动化·github·音视频
wan5555cn5 小时前
多张图片生成视频模型技术深度解析
人工智能·笔记·深度学习·算法·音视频
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
一朵梨花压海棠go8 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
一只小风华~9 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱9 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.10 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
切糕师学AI10 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
每天吃饭的羊11 小时前
state和ref
前端·javascript·react.js