vue 全局背景音乐

转自 https://blog.csdn.net/m0_46820776/article/details/121286262?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164698683416780265487240%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164698683416780265487240&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2

<template>
  <div id="app">
    <router-view />
			<!-- 背景音乐 -->
      <audio src="./assets/bj.mp3"
             loop='true'
             autoplay="autoplay"
			 ref="MusicPlay"
			hidden
             ></audio>
  </div>
</template>

在app.vue里放音乐，然后使用ref="MusicPlay"

在首页/或者你想调用的页面

html部分

<!-- 背景音乐 -->
		<div class="bjmc" @click="cyinpin()" >
			<img v-if="yinpin" src="../assets/laba/laba.png" alt="">
			<img v-else src="../assets/laba/laba-active.png" alt="">
			</div>

方法里

cyinpin(){
		  this.yinpin=!this.yinpin
if(this.yinpin===true){
 this.$parent.$refs.MusicPlay.play();
}else{
this.$parent.$refs.MusicPlay.pause();
}
		this.msg="稍等！"
		this.alertShows=true
		setTimeout(()=>{
			this.alertShows=false
		},500)
	  },