添加背景音乐，并修复各个音频视频间的冲突

src/views/PanoView.vue

@@ -263,31 +263,6 @@ import { defineAsyncComponent } from 'vue'
 import sceneTree from '/public/sceneTree.js'
 import RelicDetailForHotspot from '@/components/RelicDetailForHotspot.vue'
 import { useWindowSize } from '@vueuse/core'
-import cameraIntro11 from '@/assets/audios/camera-intro-1-1.mp3'
-import cameraIntro12 from '@/assets/audios/camera-intro-1-2.mp3'
-import cameraIntro13 from '@/assets/audios/camera-intro-1-3.mp3'
-import cameraIntro21 from '@/assets/audios/camera-intro-2-1.mp3'
-import cameraIntro22 from '@/assets/audios/camera-intro-2-2.mp3'
-import cameraIntro23 from '@/assets/audios/camera-intro-2-3.mp3'
-import cameraIntro31 from '@/assets/audios/camera-intro-3-1.mp3'
-import cameraIntro32 from '@/assets/audios/camera-intro-3-2.mp3'
-
-const cameraIntroTree = [
-  [
-    cameraIntro11,
-    cameraIntro12,
-    cameraIntro13,
-  ],
-  [
-    cameraIntro21,
-    cameraIntro22,
-    cameraIntro23,
-  ],
-  [
-    cameraIntro31,
-    cameraIntro32,
-  ],
-]
 
 const btnReturnHomeImgUrl = computed(() => {
   return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-return-home-${sceneIdx.value + 1}.png`) + ')'
@@ -437,7 +412,8 @@ watch(cameraIdx, (vNew) => {
   if (haveShownSceneEffect.value) {
     isShowCameraIntro.value = true
     cameraIntroAudioTimeoutId = setTimeout(() => {
-      cameraIntroAudio = new Audio(cameraIntroTree[sceneIdx.value][cameraIdx.value])
+      cameraIntroAudio?.pause()
+      cameraIntroAudio = new Audio(require(`@/assets/audios/camera-intro-${sceneIdx.value + 1}-${cameraIdx.value + 1}.mp3`))
       cameraIntroAudio.play()
       cameraIntroAudio.addEventListener('ended', () => {
         isShowCameraIntro.value = false
@@ -455,6 +431,9 @@ function skipCameraIntro() {
 onUnmounted(() => {
   skipCameraIntro()
 })
+onBeforeRouteUpdate(() => {
+  skipCameraIntro()
+})
 /**
   * end of 镜头切换过渡
   */
@@ -485,7 +464,8 @@ let sceneIntroAudioTimeoutId = null
 let audio = null
 function onPlayedSceneIntroVideoStart() {
   sceneIntroAudioTimeoutId = setTimeout(() => {
-    audio = new Audio(cameraIntroTree[sceneIdx.value][0])
+    audio?.pause()
+    audio = new Audio(require(`@/assets/audios/camera-intro-${sceneIdx.value + 1}-1.mp3`))
     audio.play()
     audio.addEventListener('ended', () => {
       store.commit('setHaveShownSceneEffect', {
@@ -533,16 +513,45 @@ function skipSceneIntro() {
   })
   isShowSceneIntroVideoStart.value = false
   isShowSceneIntroVideoEnd.value = false
+  sceneIntrovideoStartEl.value?.pause()
+  sceneIntrovideoEndEl.value?.pause()
 }
 onUnmounted(() => {
   skipSceneIntro()
 })
-
+onBeforeRouteUpdate(() => {
+  skipSceneIntro()
+})
 /**
  * end of 第一次进入某个场景时展示动效
  */
 
 /**
+ * 背景音乐
+ */
+let bgAudio = null
+watchEffect(() => {
+  if (isShowSceneIntroVideoStart.value || isShowCameraIntro.value) {
+    bgAudio?.pause()
+  } else {
+    bgAudio?.pause()
+    bgAudio = new Audio(require(`@/assets/audios/scene-bg-${sceneIdx.value + 1}.mp3`))
+    setTimeout(() => {
+      bgAudio.play()
+    }, 300)
+  }
+})
+onUnmounted(() => {
+  bgAudio?.pause()
+})
+onBeforeRouteUpdate(() => {
+  bgAudio?.pause()
+})
+/**
+ * end of 背景音乐
+ */
+
+/**
  * 点击“下一个场景”按钮的逻辑
  */
 function onClickNextScene() {