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,6 +356,9 @@ export function useViewModel() {
      * @description: 播放结束音效
      */
     function playEndSound() {
+        if (!isPlayWinMusic.value) {
+            return
+        }
         console.log('准备播放结束音效', dongSound)
 
         // 清理已结束的音频
@@ -368,7 +377,7 @@ export function useViewModel() {
                         console.log('结束音效播放成功')
                         playingAudios.value.push(endSound)
                     })
-              .catch(err => {
+                    .catch((err) => {
                         console.error('播放失败:', err.name, err.message)
                         if (err.name === 'NotAllowedError') {
                             console.warn('自动播放被阻止，需用户交互后播放')
@@ -379,9 +388,11 @@ export function useViewModel() {
             endSound.onended = () => {
                 console.log('结束音效播放完成')
                 const index = playingAudios.value.indexOf(endSound)
-            if (index > -1) playingAudios.value.splice(index, 1)
+                if (index > -1)
+                    playingAudios.value.splice(index, 1)
             }
-        } catch (error) {
+        }
+        catch (error) {
             console.error('创建音频对象失败:', error)
         }
     }
@@ -390,11 +401,14 @@ export function useViewModel() {
      * @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()
-                    }
+
                     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)
 
@@ -726,7 +743,7 @@ export function useViewModel() {
         stopLotteryMusic()
 
         // 清理所有音频资源
-        playingAudios.value.forEach(audio => {
+        playingAudios.value.forEach((audio) => {
             if (!audio.ended && !audio.paused) {
                 audio.pause()
             }