固定点位播放音乐初版

SWKK/src/components/Hot.vue

@@ -243,6 +243,23 @@ export default {
     setTimeout(() => {
       this.show = true;
     }, 300);
+
+    // 如果有对应的点位音频，删除
+    this.$nextTick(() => {
+      let time = -1;
+      let num = 0;
+      time = window.setInterval(() => {
+        const dotAudioDomId = document.querySelector("#dotAudioDomId");
+        num++;
+        // console.log("xxxxxxxxxxxx", dotAudioDomId);
+
+        if (dotAudioDomId) {
+          clearInterval(time);
+          document.body.removeChild(dotAudioDomId);
+        }
+        if (num >= 5) clearInterval(time);
+      }, 800);
+    });
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

SWKK/src/views/Home.vue

@@ -80,6 +80,9 @@ export default {
       playing: false,
       sonInfo: null,
       clickBottomAc: false,
+
+      // 点位背景音乐的状态
+      dotAudioSrc: "",
     };
   },
   //监听属性 类似于data概念
@@ -284,6 +287,10 @@ export default {
       window.bacMusic = !dom.paused;
       setTimeout(() => {
         this.$refs.RbottomRef.opMusic(false);
+
+        // 如果有对应的点位音频，删除
+        const dotAudioDomId = document.querySelector("#dotAudioDomId");
+        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
       }, 200);
       // 暂停背景音乐
     });
@@ -293,6 +300,10 @@ export default {
       window.bacMusic = !dom.paused;
       setTimeout(() => {
         this.$refs.RbottomRef.opMusic(false);
+
+        // 如果有对应的点位音频，删除
+        const dotAudioDomId = document.querySelector("#dotAudioDomId");
+        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
       }, 200);
       // 暂停背景音乐
     });
@@ -368,6 +379,57 @@ export default {
     });
     // 每次移动了点位就会触发
     kankan.Camera.on("flying.started", (pano) => {
+      // 固定点位的id
+      const dotId = pano.panoId;
+
+      // 走到固定点位播放音频
+      const obj = {
+        60: "dingxiang.mp3",
+        112: "liyunsheng.mp3",
+      };
+
+      // 记录当前点位音乐的路径，用于下面的对比
+
+      if (obj[dotId]) {
+        // 如果当前已经在播放音频了，并且对应的src相等
+        if (this.dotAudioSrc === obj[dotId]) return;
+        else {
+          // 如果当前点位音频的src不相等
+          this.dotAudioSrc = obj[dotId];
+
+          const audio = document.createElement("audio");
+          audio.src = `dotAudio/${obj[dotId]}`;
+          audio.id = "dotAudioDomId";
+          document.body.appendChild(audio);
+
+          // 暂停背景音乐并且记录背景音乐的状态
+          let dom = document.querySelector("#bacMusic");
+          window.bacMusic = !dom.paused;
+          setTimeout(() => {
+            this.$refs.RbottomRef.opMusic(false);
+          }, 200);
+
+          // 播放点位的对应音频
+          audio.play();
+        }
+      } else {
+        this.dotAudioSrc = "";
+
+        // 如果有对应的点位音频，删除
+        const dotAudioDomId = document.querySelector("#dotAudioDomId");
+        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
+
+        // 离开的有音频的点位，看看之前的背景音乐状态，判断时候播放背景音乐
+        if (window.bacMusic) {
+          setTimeout(() => {
+            this.$refs.RbottomRef.opMusic(true);
+          }, 100);
+        }
+      }
+
+      // 60:
+      // 112
+
       this.clickBottomAc = false;
     });
     this.kankan = kankan;