efats

src/components/MusicOnce.vue

+<template>
+  <audio class="mp3-once" :src="src" ref="audioRef"></audio>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  src: String,
+})
+
+const audioRef = ref()
+
+defineExpose({
+  play: () => {
+    audioRef.value.currentTime = 0
+    audioRef.value.play()
+  },
+  pause: () => audioRef.value.pause(),
+})
+
+</script>
+
+<style lang="less" scoped>
+.mp3-once {
+  display: block;
+  max-height: 1px;
+  max-width: 1px;
+  position: absolute;
+}
+</style>

src/main.js

 import router from './router'
 import BackPage from './components/BackPage.vue'
 import GrassGIF from './components/GrassGIF.vue'
+import MusicOnce from './components/MusicOnce.vue'
+
 // 创建 App实例
 const app = createApp(App)
 
 app.mount('#app')
 app.component('BackPage', BackPage)
 app.component('GrassGIF', GrassGIF)
+app.component('MusicOnce', MusicOnce)
 
 // createApp(App).mount('#app')
 

src/pages/game/index.vue

 <template>
-  <div ref="el"></div>
-  <FireWorkListVue :center="center" :raduis="raduis" ref="firesRef" />
+  <div ref="el" />
+  <FireWorkListVue
+    ref="firesRef"
+    :center="center"
+    :raduis="raduis"
+  />
+  <MusicOnce
+    ref="bingoRef"
+    :src="bingoMusic"
+  />
+  <MusicOnce
+    ref="failRef"
+    :src="failMusic"
+  />
+  <MusicOnce
+    ref="successRef"
+    :src="successMusic"
+  />
 </template>
 
 <script setup>
   import FireWorkListVue from '@/components/FireWorkList.vue';
   import game from "./game.js";
 
+  const path = window.location.origin + window.location.pathname
+  const bingoMusic = `${path}/music/bingo.mp3`
+  const failMusic = `${path}/music/fail.mp3`
+  const successMusic = `${path}/music/bingo.mp3`
+
   // // 修复一个 two-js bug ，当页面返回的时候, 不能正常渲染
   // // 所以这边判断如果第二次进入页面就强制刷新
   // const loadSign = localStorage.getItem('loadSign');
   // }
 
   const el = ref()
+  const bingoRef = ref()
+  const failRef = ref()
+  const successRef = ref()
   const destroyRef = ref()
   const firesRef = ref()
   const router = useRouter()
       el: el.value,
       center,
       onError: () => {
-        alert('oo ~')
+        failRef.value.play()
         const t = setTimeout(() => {
           localStorage.setItem('loadSign', '1');
           router.push('/OverPage?type=lose')
         }, 1000)
       },
       onSuccess: () => {
+        successRef.value.play()
         firesRef.value.toggle()
         // alert('你真牛逼')
         const t = setTimeout(() => {
         }, 2000)
       },
       onBingo: () => {
+        bingoRef.value.play()
       }
     })