fix: 🐛 fix pr-185 #185

为播放音效添加控制

src/views/Home/useViewModel.ts

@@ -8,9 +8,9 @@ import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
 import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
 import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useToast } from 'vue-toast-notification'
+import dongSound from '@/assets/audio/end.mp3'
 import enterAudio from '@/assets/audio/enter.wav'
 import worldCupAudio from '@/assets/audio/worldcup.mp3'
-import dongSound from '@/assets/audio/end.mp3'
 import { useElementPosition, useElementStyle } from '@/hooks/useElement'
 import i18n from '@/locales/i18n'
 import useStore from '@/store'
@@ -322,6 +322,9 @@ export function useViewModel() {
      * @description: 开始抽奖音乐
      */
     function startLotteryMusic() {
+        if (!isPlayWinMusic.value) {
+            return
+        }
         if (lotteryMusic.value) {
             lotteryMusic.value.pause()
             lotteryMusic.value = null
@@ -340,6 +343,9 @@ export function useViewModel() {
      * @description: 停止抽奖音乐
      */
     function stopLotteryMusic() {
+        if (!isPlayWinMusic.value) {
+            return
+        }
         if (lotteryMusic.value) {
             lotteryMusic.value.pause()
             lotteryMusic.value = null
@@ -350,51 +356,59 @@ export function useViewModel() {
      * @description: 播放结束音效
      */
     function playEndSound() {
+        if (!isPlayWinMusic.value) {
+            return
+        }
         console.log('准备播放结束音效', dongSound)
 
         // 清理已结束的音频
         playingAudios.value = playingAudios.value.filter(audio => !audio.ended)
 
         try {
-          const endSound = new Audio(dongSound)
+            const endSound = new Audio(dongSound)
-          endSound.volume = 1.0
+            endSound.volume = 1.0
 
-          // 简化播放逻辑
+            // 简化播放逻辑
-          const playPromise = endSound.play()
+            const playPromise = endSound.play()
 
-          if (playPromise) {
+            if (playPromise) {
-            playPromise
+                playPromise
-              .then(() => {
+                    .then(() => {
-                console.log('结束音效播放成功')
+                        console.log('结束音效播放成功')
-                playingAudios.value.push(endSound)
+                        playingAudios.value.push(endSound)
-              })
+                    })
-              .catch(err => {
+                    .catch((err) => {
-                console.error('播放失败:', err.name, err.message)
+                        console.error('播放失败:', err.name, err.message)
-                if (err.name === 'NotAllowedError') {
+                        if (err.name === 'NotAllowedError') {
-                  console.warn('自动播放被阻止，需用户交互后播放')
+                            console.warn('自动播放被阻止，需用户交互后播放')
-                }
+                        }
-              })
+                    })
-          }
+            }
 
-          endSound.onended = () => {
+            endSound.onended = () => {
-            console.log('结束音效播放完成')
+                console.log('结束音效播放完成')
-            const index = playingAudios.value.indexOf(endSound)
+                const index = playingAudios.value.indexOf(endSound)
-            if (index > -1) playingAudios.value.splice(index, 1)
+                if (index > -1)
-          }
+                    playingAudios.value.splice(index, 1)
-        } catch (error) {
+            }
-          console.error('创建音频对象失败:', error)
         }
-      }
+        catch (error) {
+            console.error('创建音频对象失败:', error)
+        }
+    }
 
     /**
      * @description: 重置音频状态
      */
     function resetAudioState() {
+        if (!isPlayWinMusic.value) {
+            return
+        }
         // 停止抽奖音乐
         stopLotteryMusic()
 
         // 清理所有正在播放的音频
-        playingAudios.value.forEach(audio => {
+        playingAudios.value.forEach((audio) => {
             if (!audio.ended && !audio.paused) {
                 audio.pause()
             }
@@ -421,7 +435,8 @@ export function useViewModel() {
             if (audioContext) {
                 console.log('音频上下文可用')
             }
-        } catch (e) {
+        }
+        catch (e) {
             console.warn('音频上下文不可用:', e)
         }
 
@@ -563,9 +578,8 @@ export function useViewModel() {
                 .easing(TWEEN.Easing.Exponential.InOut)
                 .start()
                 .onComplete(() => {
-                    if (isPlayWinMusic.value) {
+                    playWinMusic()
-                        playWinMusic()
+
-                    }
                     confettiFire()
                     resetCamera()
                 })
@@ -573,6 +587,9 @@ export function useViewModel() {
     }
     // 播放音频，中将卡片越多audio对象越多，声音越大
     function playWinMusic() {
+        if (!isPlayWinMusic.value) {
+            return
+        }
         // 清理已结束的音频
         playingAudios.value = playingAudios.value.filter(audio => !audio.ended && !audio.paused)
 
@@ -654,7 +671,7 @@ export function useViewModel() {
      * @param {string} mod 模式
      */
     function randomBallData(mod: 'default' | 'lucky' | 'sphere' = 'default') {
-    // 两秒执行一次
+        // 两秒执行一次
         intervalTimer.value = setInterval(() => {
             // 产生随机数数组
             const indexLength = 4
@@ -726,7 +743,7 @@ export function useViewModel() {
         stopLotteryMusic()
 
         // 清理所有音频资源
-        playingAudios.value.forEach(audio => {
+        playingAudios.value.forEach((audio) => {
             if (!audio.ended && !audio.paused) {
                 audio.pause()
             }