功能框架：文物详情页播放音乐

src/views/gui/RelicDetail.vue

@@ -25,6 +25,27 @@
         </li>
       </ul>
     </div>
+    <button
+      v-show="!isAudioPlaying"
+      class="audio-control"
+      @click="playAudio"
+    >
+      开
+    </button>
+    <button
+      v-show="isAudioPlaying"
+      class="audio-control"
+      @click="pauseAudio"
+    >
+      关
+    </button>
+    <audio
+      ref="audio"
+      loop
+      src="@/assets/中秋对歌会.mp3"
+      @play="isAudioPlaying = true"
+      @pause="isAudioPlaying = false"
+    />
   </div>
 </template>
 
@@ -32,12 +53,25 @@
 import { goodsData } from "@/assets/data/data.js"
 
 export default {
+  data() {
+    return {
+      isAudioPlaying: false,
+    }
+  },
   computed: {
     relicInfo() {
       return goodsData.find((item) => {
         return item.id === Number(this.$route.query.id)
       })
     }
+  },
+  methods: {
+    playAudio() {
+      this.$refs.audio.play()
+    },
+    pauseAudio() {
+      this.$refs.audio.pause()
+    }
   }
 }
 </script>
@@ -116,5 +150,14 @@ export default {
       }
     }
   }
+  button.audio-control {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  audio {
+    display: none;
+  }
 }
 </style>