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();})
}