今天要给网页加背景音乐，但由于浏览器限制无法播放，查了很多资料，浪费了大量时间才解决，话不多说思路如下：
<script setup>
import { ref } from 'vue'
const audio = ref()
function click() {
audio.value.play()
}
</script>
我先通过audio ref="audio" const audio = ref()进行绑定响应式变量，body，并且建立一个click函数，
函数内自动调用播放方法
<template>
<body id="app" @click="click">
<a>主页！！！</a>
<audio ref="audio" autoplay="autoplay" loop>
<source src="../assets/backmusic/dead.mp3" />
<!-- 本地音乐路径-->
</audio>
<!-- <button @click="click">111</button>
<button @click="click">播放音频</button>
</body>
</template>
当用户点击body内的内容时，自动调用方法进行播放，完成与网页的交互完成播放背景音乐，这就非常简单了
如果你还有登陆页面的话（多页面）就直接把下面这段代码加入template,(因为已经和浏览器进行交互过了）
这是浏览器对用户体验的保护机制，防止乱播放音乐
<audio ref="audio" autoplay="autoplay" loop>
<source src="../assets/backmusic/dead.mp3" />
<!-- 本地音乐路径-->
</audio>
我也是个程序员小白，希望能帮到大家，如有不对，欢迎指正
扫一扫
1671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
