v1.2.5

1、增加背景音乐播放和控制，mp3改为采用动态方式加载，避免浏览器缓存
2、前门模块的鼓声同样处理

components/QianmenScene.vue

@@ -82,7 +82,8 @@ const toggleMusic = () => {
   if (!musicPlayer.value) {
     // 创建音频对象
     musicPlayer.value = uni.createInnerAudioContext()
-    musicPlayer.value.src = '/static/music/bgm1.mp3'
+    const bgmUrl = new URL('/static/music/bgm1.mp3', import.meta.url)
+    musicPlayer.value.src = bgmUrl.href
     musicPlayer.value.loop = false
     
     // 监听播放结束

components/SinglePageContainer.vue

@@ -57,6 +57,10 @@ const isAutoScrolling = ref(false)
 const showLoading = ref(true)
 // 是否已完成图片加载
 const isImagesLoaded = ref(false)
+// 音乐播放状态
+const isMusicPlaying = ref(false)
+// 音乐播放器实例
+const audioPlayer = ref(null)
 
 
 // 推荐关键词
@@ -261,9 +265,62 @@ const initPage = () => {
   console.log('页面准备就绪')
 }
 
+// 初始化音乐播放器
+const initMusicPlayer = () => {
+  try {
+    // 创建音频播放器实例
+    audioPlayer.value = uni.createInnerAudioContext()
+    const bgmUrl = new URL('/static/music/bgm1.mp3', import.meta.url)
+    audioPlayer.value.src = bgmUrl.href
+    audioPlayer.value.loop = true
+    
+    // 播放完成事件
+    audioPlayer.value.onEnded(() => {
+      audioPlayer.value.seek(0)
+      audioPlayer.value.play()
+    })
+    
+    // 播放错误事件
+    audioPlayer.value.onError((err) => {
+      console.error('音乐播放错误:', err)
+    })
+    
+    console.log('音乐播放器初始化完成')
+  } catch (error) {
+    console.error('初始化音乐播放器失败:', error)
+  }
+}
+
+// 播放/暂停音乐
+const toggleMusic = () => {
+  if (!audioPlayer.value) {
+    initMusicPlayer()
+  }
+  
+  if (isMusicPlaying.value) {
+    // 暂停音乐
+    audioPlayer.value.pause()
+    isMusicPlaying.value = false
+    console.log('音乐已暂停')
+  } else {
+    // 播放音乐
+    audioPlayer.value.play()
+    isMusicPlaying.value = true
+    console.log('音乐已开始播放')
+  }
+}
+
 // 组件挂载后初始化
 onMounted(() => {
   console.log('SinglePageContainer 组件挂载')
+  
+  // 初始化音乐播放器
+  initMusicPlayer()
+  
+  // 自动开始播放音乐
+  setTimeout(() => {
+    toggleMusic()
+  }, 1000)
 })
 
 // 处理滚动事件（从下往上滑动）
@@ -505,6 +562,15 @@ onUnmounted(() => {
 
 <template>
   <div class="single-page-wrapper">
+    <!-- 音乐控制按钮 -->
+    <div 
+      class="music-control"
+      :class="{ 'music-playing': isMusicPlaying }"
+      @click="toggleMusic"
+    >
+      <img src="/static/images/music_on.png" alt="音乐" class="music-icon" />
+    </div>
+    
     <!-- 加载组件 -->
     <LoadingComponent
       v-if="showLoading"
@@ -832,6 +898,43 @@ onUnmounted(() => {
   }
 }
 
+/* 音乐控制按钮样式 */
+.music-control {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  /* background-color: rgba(0, 0, 0, 0.3); */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  cursor: pointer;
+}
+
+
+.music-icon {
+  width: 49rpx;
+  height: 49rpx;
+  transition: transform 0.3s ease;
+}
+
+/* 音乐播放时的转动动画 */
+.music-playing .music-icon {
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* 响应式设计 */
 @media (max-width: 480px) {
   .scene-title {
@@ -850,5 +953,17 @@ onUnmounted(() => {
     margin-right: 20px;
     margin-left: 20px;
   }
+  
+  .music-control {
+    width: 40px;
+    height: 40px;
+    top: 10px;
+    right: 10px;
+  }
+  
+  .music-icon {
+    width: 24px;
+    height: 24px;
+  }
 }
 </style>