feat

index.html

@@ -294,7 +294,12 @@
                             <!-- <i class="icon icon-dpad-up"></i> -->
                             <div class="container"></div>
                         </div>
-                        <div id="volume" class="ui-icon wide">
+                        <!-- <div id="volume" class="ui-icon wide">
+                            <a>
+                                <img src="images/Volume btn_on.png" width="24" height="24">
+                            </a>
+                        </div> -->
+                        <div id="volume-Customize" class="ui-icon wide">
                             <a>
                                 <img src="images/Volume btn_on.png" width="24" height="24">
                             </a>
@@ -783,9 +788,41 @@
             </div>
         </div>
         <div id="tag-billboards" style="display: none;"></div>
- 
+        <audio id="backgroundMusic" loop>
+        <source src="./media/bgMusic.mp3" type="audio/mpeg">
+    	您的浏览器不支持音频播放
+        </audio>
         
     </div>
+    <div id="baseBg" ><div id="baseBtn" class="btn"><img src="images/baseBtn.png" alt="" draggable="false"></div></div>
+
+    <script>
+      const volumeCustomize = document.querySelector('#volume-Customize');
+      const volumeImg = volumeCustomize.querySelector('img');
+      const musicPlayer = document.getElementById('backgroundMusic');
+      const baseBg = document.getElementById('baseBg');
+      const baseBtn = document.getElementById('baseBtn');
+
+      baseBtn.addEventListener('click',()=>{
+        musicPlayer.play();
+        baseBg.style.display = 'none';
+        volumeImg.src = 'images/Volume btn_off.png';
+      })
+
+      volumeCustomize.addEventListener('click', () => {
+        console.log(123)
+        // 切换图片源
+        if (volumeImg.src.includes('btn_on.png')) {
+          console.log(1231)
+          musicPlayer.play();
+          volumeImg.src = 'images/Volume btn_off.png';
+        } else {
+          console.log(1232)
+          musicPlayer.pause();
+          volumeImg.src = 'images/Volume btn_on.png';
+        }
+      });
+    </script>
    
     <script>