.

src/components/BgMusic.vue

@@ -1,6 +1,17 @@
 <template>
-  <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
-    <audio :src="url" ref="audioRef" loop @loadedmetadata="show = true" @play="handlePlay"></audio>
+  <div
+    v-show="show"
+    class="bg-music"
+    :class="{ ['icon-playing']: playing }"
+    @click="handleClick"
+  >
+    <audio
+      ref="audioRef"
+      :src="url"
+      loop
+      @loadedmetadata="show = true"
+      @play="handlePlay"
+    />
   </div>
 </template>
 
@@ -18,7 +29,7 @@ export default {
   },
   mounted() {
     document.body.addEventListener('click', this.handleClick)
-
+    this.$refs.audioRef.volume = 0.3
     this.$nextTick(() => {
       this.handleIOSAudio()
     })
@@ -64,12 +75,12 @@ export default {
 
   width: 2em;
   height: 2em;
-  background-image: url('~@/assets/ButtonImage/play.png');
+  background-image: url("~@/assets/ButtonImage/play.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
 
   &.icon-playing {
-    background-image: url('~@/assets/ButtonImage/paused.png');
+    background-image: url("~@/assets/ButtonImage/paused.png");
     animation: musicrotate 3s linear infinite;
   }
 

src/components/MusicOnce.vue

@@ -1,5 +1,9 @@
 <template>
-  <audio class="mp3-once" :src="src" ref="audioRef"></audio>
+  <audio
+    ref="audioRef"
+    class="mp3-once"
+    :src="src"
+  />
 </template>
 
 <script setup>