增加音频按钮（取消自动播放）

src/views/Home.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="home" @click="autoplay" @touchstart="autoplay">
+  <!-- @click="autoplay" @touchstart="autoplay" -->
+  <div class="home">
     <audio
       v-if="audio"
       class="audio"
       id="audio1"
       :src="audio"
       preload
-      autoplay
-      loop
       ref="musicBg"
+      @ended="overAudio"
     ></audio>
     <div
       class="content"
@@ -58,8 +58,8 @@
     </div>
     <ul class="iconarr" v-if="fixIcon.length > 1">
       <li
-        :class="{ active: item.id === active }"
-        @click="active = item.id"
+        :class="{ active: item.id === active || item.audioAc }"
+        @click="changeActive(item.id, item.audioAc)"
         v-for="(item, i) in fixIcon"
         :key="i"
       >
@@ -84,6 +84,13 @@ import "swiper/css/swiper.css";
 import browser from "@/utils/browser";
 
 let iconArr = [
+  {
+    name: "音频",
+    id: "audio",
+    img: "audio-icon",
+    display: false,
+    audioAc: false,
+  },
   { name: "图片", id: "images", img: "img-icon", display: false },
   { name: "视频", id: "video", img: "video-icon", display: false },
   { name: "网页", id: "iframe", img: "iframe-icon", display: false },
@@ -132,15 +139,13 @@ export default {
       if (!this.$refs.musicBg) {
         return;
       }
+      // 如果点击的是音频
       setTimeout(() => {
         if (newVal == "video") {
+          this.audioAc(false);
           if (!this.$refs.musicBg.paused) {
             this.$refs.musicBg.pause();
           }
-        } else {
-          if (this.$refs.musicBg.paused) {
-            this.$refs.musicBg.play(); // 暂停
-          }
         }
       }, 500);
     },
@@ -159,17 +164,41 @@ export default {
     SwiperSlide,
   },
   methods: {
-    autoplay() {
-      if (this.loadAuto) {
-        return;
-      }
-      try {
+    // 音频播放完毕
+    overAudio(){
+      console.log('播放声音完毕');
+      this.audioAc(false);
+    },
+    // 音频的状态
+    audioAc(flag) {
+      this.iconArr.forEach((v) => {
+        if (v.id === "audio") v.audioAc = flag;
+      });
+    },
+    // 点击切换图片--视频
+    changeActive(id, flag) {
+      if (id === "audio" && flag === false) {
+        this.audioAc(true);
         this.$refs.musicBg.play();
-        this.loadAuto = true;
-      } catch (error) {
-        error;
+        return;
+      } else if (id === "audio" && flag === true) {
+        this.audioAc(false);
+        this.$refs.musicBg.pause();
+        return;
       }
+      this.active = id;
     },
+    // autoplay() {
+    //   if (this.loadAuto) {
+    //     return;
+    //   }
+    //   try {
+    //     this.$refs.musicBg.play();
+    //     this.loadAuto = true;
+    //   } catch (error) {
+    //     error;
+    //   }
+    // },
     async getData() {
       // https://www.4dmodel.com/
       let url = `https://super.4dage.com/data/${
@@ -180,9 +209,7 @@ export default {
       if (!this.data) {
         return alert("热点解析错误");
       }
-
       this.audio = this.data["backgroundMusic"];
-
       if (!this.data.content && this.isMobile) {
         this.iconArr.pop();
       }
@@ -191,6 +218,8 @@ export default {
           this.active = !this.active ? item.id : this.active;
           item.display = true;
         }
+        // 如果有音频
+        if (item.id === "audio" && this.audio) item.display = true;
       });
     },
 
@@ -260,6 +289,7 @@ export default {
   }
 }
 .home {
+  background-color: rgba(0, 0, 0, 0.8);
   width: 100%;
   height: 100%;
   position: relative;
@@ -280,7 +310,7 @@ export default {
           max-height: 570px;
           border-radius: 14px;
         }
-       
+
         iframe {
           height: 570px;
           width: 1000px;
@@ -348,7 +378,7 @@ export default {
           iframe {
             max-height: 500px;
           }
-          img{
+          img {
             max-height: 80vh;
             width: 90%;
           }
@@ -375,7 +405,7 @@ export default {
             width: 100%;
             border-radius: 0;
           }
-          img{
+          img {
             max-height: 80vh;
             width: 90%;
           }
@@ -387,14 +417,17 @@ export default {
       }
     }
     .iconarr {
+      display: flex;
+      flex-wrap: wrap;
       list-style: none;
       margin-right: 0px;
       position: fixed;
-      bottom: 10px;
+      bottom: 0px;
       right: 0px;
       z-index: 10000;
       li {
         width: 70px;
+        margin-bottom: 10px;
       }
     }
   }