From 6c2f6f31f1cfdcbae028c9cee6501298da3d79c7 Mon Sep 17 00:00:00 2001 From: Wenzhe Date: Fri, 6 Feb 2026 15:46:30 +0800 Subject: [PATCH] v1.3.5 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1、bgm、鼓声、视频的播放统一通过pinia进行管理 2、优化bgm播放、点击鼓声、暂停bgm、进入webview及视频播放后退出时的bgm控制 --- components/ChongwenScene.vue | 21 +- components/QianmenScene.vue | 10 +- components/SinglePageContainer.vue | 307 ++++++++++++++--------------- store/player.js | 90 +++++++++ 4 files changed, 244 insertions(+), 184 deletions(-) create mode 100644 store/player.js diff --git a/components/ChongwenScene.vue b/components/ChongwenScene.vue index 28b70d4..b81daae 100644 --- a/components/ChongwenScene.vue +++ b/components/ChongwenScene.vue @@ -2,8 +2,11 @@ import { ref, onMounted, computed } from 'vue' import VideoPlayButton from './VideoPlayButton.vue' import VideoPlayerModal from './VideoPlayerModal.vue' +import { usePlayerStore } from '../store/player' import { recordInteraction } from '../api/api.js' +const playerStore = usePlayerStore() + // 组件属性 const props = defineProps({ // 是否为活动状态 @@ -55,9 +58,6 @@ const parallaxOffset = computed(() => { return props.scrollPosition * 0.1 }) -// 保存BGM状态 -const wasBgPlayingBeforeWebview = ref(false) - // 打开webview页面 const openWebview = () => { // 标记互动点击已完成 @@ -77,20 +77,11 @@ const openWebview = () => { // 检查是否满足收集福印的条件 checkSealCollection() - // 保存BGM状态 - wasBgPlayingBeforeWebview.value = props.isMusicPlaying - // 通知父组件webview即将打开 emit('webview-open') - // 暂停全局BGM播放 - if (props.isMusicPlaying) { - emit('pause-bgm', 'webview') - } - - // 标记即将打开webview - uni.setStorageSync('isOpeningWebview', true) - uni.setStorageSync('wasMusicPlayingBeforeWebview', props.isMusicPlaying) + // 暂停全局BGM播放并保存状态 + emit('pause-bgm', 'webview') uni.navigateTo({ url: '/pages/webview/webview', @@ -105,7 +96,7 @@ const openWebview = () => { duration: 1500 }) // 如果打开失败，恢复BGM状态 - if (wasBgPlayingBeforeWebview.value) { + if (props.isMusicPlaying) { emit('resume-bgm') } // 通知父组件webview打开失败 diff --git a/components/QianmenScene.vue b/components/QianmenScene.vue index 87e90f2..19aba25 100644 --- a/components/QianmenScene.vue +++ b/components/QianmenScene.vue @@ -106,8 +106,9 @@ watch(() => props.isVideoPlaying, (newIsVideoPlaying) => { if (newIsVideoPlaying && isDrumPlaying.value && drumPlayer.value) { drumPlayer.value.stop() isDrumPlaying.value = false - // 恢复BGM播放状态 - emit('resume-bgm') + // 不恢复BGM播放状态，由视频关闭时处理 + // 因为这个暂停是播放鼓声时暂停的，而不是用户暂停的 + console.log('视频开始播放，停止鼓声，但不恢复BGM播放') } }) @@ -262,11 +263,10 @@ const openVideoPlayer = () => { isDrumPlaying.value = false drumPlayer.value.destroy() drumPlayer.value = null - // 恢复BGM播放状态 - emit('resume-bgm') + // 不恢复BGM播放状态，由视频关闭时处理 } showVideoPlayer.value = true - emit('video-open') + emit('video-open', true) // 传递isQianmenVideo=true参数 } // 关闭视频播放器 diff --git a/components/SinglePageContainer.vue b/components/SinglePageContainer.vue index 88b53cc..fa09685 100644 --- a/components/SinglePageContainer.vue +++ b/components/SinglePageContainer.vue @@ -2,6 +2,7 @@ import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue' import { useSceneStore } from '../store/scene' import { useCollectionStore } from '../store/collection' +import { usePlayerStore } from '../store/player' import { recordPageVisit, saveUserInfo, generateCoupletPoster } from '../api/api.js' import LongImageViewer from './LongImageViewer.vue' import MediaPlayer from './MediaPlayer.vue' @@ -18,6 +19,7 @@ import LoadingComponent from './LoadingComponent.vue' const sceneStore = useSceneStore() const collectionStore = useCollectionStore() +const playerStore = usePlayerStore() // 当前活动场景索引 const activeSceneIndex = ref(0) @@ -57,8 +59,6 @@ const isAutoScrolling = ref(false) const showLoading = ref(true) // 是否已完成图片加载 const isImagesLoaded = ref(false) -// 音乐播放状态 -const isMusicPlaying = ref(false) // 音乐播放器实例 const audioPlayer = ref(null) @@ -117,13 +117,6 @@ const scenes = ref([ const sceneInteractiveStates = ref(scenes.value.map(() => false)) // 福印收集状态 const sealCollectedStates = ref(scenes.value.map(() => false)) -// 视频播放状态 -const isVideoPlaying = ref(false) - -// webview打开状态 -const isWebviewOpening = ref(false) -// 鼓声播放状态 -const isDrumPlaying = ref(false) // 计算当前收集的物品 const collectedItems = computed(() => { @@ -149,7 +142,7 @@ const collectionProgress = computed(() => { // 计算是否禁用BGM控制按钮 const isBgmButtonDisabled = computed(() => { - return isVideoPlaying.value || isDrumPlaying.value + return playerStore.isBgmButtonDisabled }) // 计算福印收集对象（传递给 EndPage） @@ -247,7 +240,7 @@ const handleStart = () => { console.log('点击开始按钮，hasScrolled:', hasScrolled.value) // 检查并播放背景音乐 - if (!isMusicPlaying.value) { + if (!playerStore.isMusicPlaying) { console.log('背景音乐未播放，开始播放') toggleMusic() } @@ -344,10 +337,10 @@ const toggleMusic = () => { initMusicPlayer() } - if (isMusicPlaying.value) { + if (playerStore.isMusicPlaying) { // 暂停音乐 audioPlayer.value.pause() - isMusicPlaying.value = false + playerStore.setMusicPlaying(false) console.log('音乐已暂停') } else { // 播放音乐 @@ -357,7 +350,7 @@ const toggleMusic = () => { if (result && typeof result.then === 'function') { // Web平台：使用Promise处理 result.then(() => { - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) console.log('音乐已开始播放') }).catch(error => { console.error('音乐播放失败（需要用户交互）:', error) @@ -365,7 +358,7 @@ const toggleMusic = () => { }) } else { // 其他平台：同步处理 - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) console.log('音乐已开始播放') } } catch (error) { @@ -614,14 +607,7 @@ const handleQianmenHeightChanged = (height) => { console.log('当前CSS变量:', getComputedStyle(document.documentElement).getPropertyValue('--scene-height')) } -// 跟踪视频打开前的BGM状态 -const wasMusicPlayingBeforeVideo = ref(false) -// 跟踪鼓声开始前的BGM状态 -const wasMusicPlayingBeforeDrum = ref(false) - -// 跟踪webview打开前的BGM状态 -const wasMusicPlayingBeforeWebview = ref(false) // 页面显示时的生命周期钩子 import { onShow } from '@dcloudio/uni-app' @@ -629,122 +615,84 @@ import { onShow } from '@dcloudio/uni-app' // 监听页面显示事件 onShow(() => { // 当从webview返回时，恢复BGM状态 - const isOpeningWebview = uni.getStorageSync('isOpeningWebview') - const wasMusicPlayingBeforeWebview = uni.getStorageSync('wasMusicPlayingBeforeWebview') - const wasMusicPlayingBeforeDrum = uni.getStorageSync('wasMusicPlayingBeforeDrum') - const isVideoPlaying = uni.getStorageSync('isVideoPlaying') - const wasMusicPlayingBeforeVideo = uni.getStorageSync('wasMusicPlayingBeforeVideo') - console.log('onShow - 页面显示:', { - isOpeningWebview, - wasMusicPlayingBeforeWebview, - wasMusicPlayingBeforeDrum, - isVideoPlaying, - wasMusicPlayingBeforeVideo, - currentIsMusicPlaying: isMusicPlaying.value, + isOpeningWebview: playerStore.isWebviewOpening, + wasMusicPlayingBeforeWebview: playerStore.wasMusicPlayingBeforeWebview, + wasMusicPlayingBeforeDrum: playerStore.wasMusicPlayingBeforeDrum, + isVideoPlaying: playerStore.isVideoPlaying, + wasMusicPlayingBeforeVideo: playerStore.wasMusicPlayingBeforeVideo, + currentIsMusicPlaying: playerStore.isMusicPlaying, audioPlayerExists: !!audioPlayer.value }) - if (isOpeningWebview) { - // 检查是否是从鼓声播放时进入webview的 - // uni.getStorageSync 返回空字符串表示键不存在，需要检查是否有值 - const hasDrumFlag = wasMusicPlayingBeforeDrum !== '' && wasMusicPlayingBeforeDrum !== undefined && wasMusicPlayingBeforeDrum !== null - console.log('检查鼓声标记:', { hasDrumFlag, wasMusicPlayingBeforeDrum }) + if (playerStore.isWebviewOpening) { + // 正常的webview返回，根据之前的BGM状态恢复 + console.log('正常webview返回，恢复BGM状态:', { + wasMusicPlayingBeforeWebview: playerStore.wasMusicPlayingBeforeWebview, + wasMusicPlayingBeforeDrum: playerStore.wasMusicPlayingBeforeDrum, + currentIsMusicPlaying: playerStore.isMusicPlaying, + audioPlayerExists: !!audioPlayer.value + }) - if (hasDrumFlag) { - console.log('从鼓声播放时进入webview，恢复BGM状态:', wasMusicPlayingBeforeDrum) - // 如果之前BGM是播放状态，恢复播放 - const shouldPlay = wasMusicPlayingBeforeDrum === 'true' || wasMusicPlayingBeforeDrum === true || wasMusicPlayingBeforeDrum === 1 || wasMusicPlayingBeforeDrum === '1' - if (shouldPlay && !isMusicPlaying.value) { - // 如果audioPlayer不存在，初始化它 - if (!audioPlayer.value) { - initMusicPlayer() - } - if (audioPlayer.value) { - try { - console.log('尝试恢复BGM播放（鼓声场景）') - const result = audioPlayer.value.play() - // 检查play()方法是否返回Promise（Web平台） - if (result && typeof result.then === 'function') { - // Web平台：使用Promise处理 - result.then(() => { - isMusicPlaying.value = true - console.log('全局BGM已恢复播放（从webview返回，之前鼓声播放）') - }).catch(error => { - console.error('恢复BGM播放失败:', error) - // 即使播放失败，也要标记为播放状态，确保UI正确 - isMusicPlaying.value = true - }) - } else { - // 非Web平台：直接标记为播放状态 - isMusicPlaying.value = true - console.log('全局BGM已恢复播放（从webview返回，之前鼓声播放）') - } - } catch (error) { - console.error('恢复BGM播放失败:', error) - // 即使播放失败，也要标记为播放状态，确保UI正确 - isMusicPlaying.value = true - } - } + // 检查是否需要恢复BGM播放 + // 情况1：如果wasMusicPlayingBeforeWebview为true，说明进入webview前BGM是播放状态，应该恢复播放 + // 情况2：如果wasMusicPlayingBeforeDrum为true，说明在鼓声播放前BGM是播放状态，应该恢复播放 + // 情况3：如果wasMusicPlayingBeforeWebview和wasMusicPlayingBeforeDrum都为false，但isDrumPlaying为true，说明从webview返回时鼓声应该还在播放，应该保持BGM暂停 + // 情况4：如果以上都不满足，说明用户主动暂停了BGM，应该保持暂停 + const shouldResumeBGM = playerStore.wasMusicPlayingBeforeWebview || playerStore.wasMusicPlayingBeforeDrum + + console.log('是否应该恢复BGM播放:', shouldResumeBGM) + + // 恢复BGM播放 + if (shouldResumeBGM && !playerStore.isMusicPlaying) { + // 如果audioPlayer不存在，初始化它 + if (!audioPlayer.value) { + initMusicPlayer() } - // 清除标记 - uni.removeStorageSync('wasMusicPlayingBeforeDrum') - } else { - // 正常的webview返回，根据之前的BGM状态恢复 - // 确保wasMusicPlayingBeforeWebview是布尔值 - const wasPlaying = wasMusicPlayingBeforeWebview === 'true' || wasMusicPlayingBeforeWebview === true || wasMusicPlayingBeforeWebview === 1 || wasMusicPlayingBeforeWebview === '1' - console.log('正常webview返回，恢复BGM状态:', { - wasMusicPlayingBeforeWebview, - wasPlaying, - currentIsMusicPlaying: isMusicPlaying.value, - audioPlayerExists: !!audioPlayer.value - }) - if (wasPlaying && !isMusicPlaying.value) { - // 如果audioPlayer不存在，初始化它 - if (!audioPlayer.value) { - initMusicPlayer() - } - if (audioPlayer.value) { - try { - console.log('尝试恢复BGM播放（正常场景）') - const result = audioPlayer.value.play() - // 检查play()方法是否返回Promise（Web平台） - if (result && typeof result.then === 'function') { - // Web平台：使用Promise处理 - result.then(() => { - isMusicPlaying.value = true - console.log('全局BGM已恢复播放（从webview返回）') - }).catch(error => { - console.error('恢复BGM播放失败:', error) - // 即使播放失败，也要标记为播放状态，确保UI正确 - isMusicPlaying.value = true - }) - } else { - // 非Web平台：直接标记为播放状态 - isMusicPlaying.value = true + if (audioPlayer.value) { + try { + console.log('尝试恢复BGM播放（正常场景）') + const result = audioPlayer.value.play() + // 检查play()方法是否返回Promise（Web平台） + if (result && typeof result.then === 'function') { + // Web平台：使用Promise处理 + result.then(() => { + playerStore.setMusicPlaying(true) console.log('全局BGM已恢复播放（从webview返回）') - } - } catch (error) { - console.error('恢复BGM播放失败:', error) - // 即使播放失败，也要标记为播放状态，确保UI正确 - isMusicPlaying.value = true + }).catch(error => { + console.error('恢复BGM播放失败:', error) + // 即使播放失败，也要标记为播放状态，确保UI正确 + playerStore.setMusicPlaying(true) + }) + } else { + // 非Web平台：直接标记为播放状态 + playerStore.setMusicPlaying(true) + console.log('全局BGM已恢复播放（从webview返回）') } + } catch (error) { + console.error('恢复BGM播放失败:', error) + // 即使播放失败，也要标记为播放状态，确保UI正确 + playerStore.setMusicPlaying(true) } } + } else { + // 如果之前BGM是暂停状态，保持暂停 + console.log('BGM保持暂停状态（从webview返回）') } - // 清除标记 - uni.removeStorageSync('isOpeningWebview') - uni.removeStorageSync('wasMusicPlayingBeforeWebview') + + // 重置webview状态 + playerStore.setWebviewOpening(false) // 重置鼓声播放状态，确保BGM按钮可以点击 - isDrumPlaying.value = false + playerStore.setDrumPlaying(false) console.log('重置isDrumPlaying为false，当前isBgmButtonDisabled:', isBgmButtonDisabled.value) // 通知组件webview已关闭 handleWebviewClose() - } else if (isVideoPlaying) { + // 重置鼓声前的BGM状态，避免影响下次webview返回 + playerStore.wasMusicPlayingBeforeDrum = false + } else if (playerStore.isVideoPlaying) { // 从视频返回，恢复BGM状态 - console.log('从视频返回，恢复BGM状态:', wasMusicPlayingBeforeVideo) - const wasPlaying = wasMusicPlayingBeforeVideo === 'true' || wasMusicPlayingBeforeVideo === true || wasMusicPlayingBeforeVideo === 1 || wasMusicPlayingBeforeVideo === '1' - if (wasPlaying && !isMusicPlaying.value) { + console.log('从视频返回，恢复BGM状态:', playerStore.wasMusicPlayingBeforeVideo) + if (playerStore.wasMusicPlayingBeforeVideo && !playerStore.isMusicPlaying) { // 如果audioPlayer不存在，初始化它 if (!audioPlayer.value) { initMusicPlayer() @@ -757,71 +705,79 @@ onShow(() => { if (result && typeof result.then === 'function') { // Web平台：使用Promise处理 result.then(() => { - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) console.log('全局BGM已恢复播放（从视频返回）') }).catch(error => { console.error('恢复BGM播放失败:', error) // 即使播放失败，也要标记为播放状态，确保UI正确 - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) }) } else { // 非Web平台：直接标记为播放状态 - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) console.log('全局BGM已恢复播放（从视频返回）') } } catch (error) { console.error('恢复BGM播放失败:', error) // 即使播放失败，也要标记为播放状态，确保UI正确 - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) } } } - // 清除标记 - uni.removeStorageSync('isVideoPlaying') - uni.removeStorageSync('wasMusicPlayingBeforeVideo') // 重置视频播放状态 - isVideoPlaying.value = false + playerStore.setVideoPlaying(false) console.log('重置isVideoPlaying为false，当前isBgmButtonDisabled:', isBgmButtonDisabled.value) } }) // 处理视频打开事件 -const handleVideoOpen = () => { +const handleVideoOpen = (isQianmenVideo = false) => { // 标记视频正在播放 - isVideoPlaying.value = true - // 保存到本地存储 - uni.setStorageSync('isVideoPlaying', true) + playerStore.setVideoPlaying(true) // 保存原始BGM状态 - wasMusicPlayingBeforeVideo.value = isMusicPlaying.value - // 保存到本地存储 - uni.setStorageSync('wasMusicPlayingBeforeVideo', isMusicPlaying.value) + // 无论是否是前门的视频，都保存鼓声播放前的BGM状态 + // 这样，无论点击哪个商圈的视频，只要播放鼓声前BGM是播放的，退出视频后都需要恢复BGM播放 + playerStore.wasMusicPlayingBeforeVideo = playerStore.wasMusicPlayingBeforeDrum + console.log('视频打开时，保存鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum) // 停止全局BGM播放 - if (audioPlayer.value && isMusicPlaying.value) { + if (audioPlayer.value && playerStore.isMusicPlaying) { audioPlayer.value.pause() - isMusicPlaying.value = false + playerStore.setMusicPlaying(false) console.log('全局BGM已停止（视频播放中）') } // 标记鼓声应该停止 - isDrumPlaying.value = false + playerStore.setDrumPlaying(false) + + // 确保BGM保持暂停状态（如果是由鼓声导致的暂停） + console.log('视频打开时，BGM状态:', playerStore.isMusicPlaying) + console.log('视频打开时，鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum) } // 处理视频关闭事件 const handleVideoClose = () => { // 标记视频已停止播放 - isVideoPlaying.value = false + playerStore.setVideoPlaying(false) + + // 检查是否需要恢复BGM播放 + // 只有当鼓声播放前BGM是播放状态时，才恢复BGM播放 + const shouldResumeBGM = playerStore.restoreMusicStateAfterVideo() + + console.log('视频关闭时，是否应该恢复BGM播放:', shouldResumeBGM) + console.log('视频关闭时，BGM状态:', playerStore.isMusicPlaying) + console.log('视频关闭时，鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum) // 恢复全局BGM到原始状态 - if (audioPlayer.value && wasMusicPlayingBeforeVideo.value && !isMusicPlaying.value) { + if (audioPlayer.value && shouldResumeBGM && !playerStore.isMusicPlaying) { try { const result = audioPlayer.value.play() // 检查play()方法是否返回Promise（Web平台） if (result && typeof result.then === 'function') { // Web平台：使用Promise处理 result.then(() => { - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) console.log('全局BGM已恢复播放（视频已关闭）') }).catch(error => { console.error('BGM恢复播放失败（需要用户交互）:', error) @@ -829,32 +785,34 @@ const handleVideoClose = () => { }) } else { // 其他平台：同步处理 - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) console.log('全局BGM已恢复播放（视频已关闭）') } } catch (error) { console.error('BGM恢复播放失败（需要用户交互）:', error) // 不更新isMusicPlaying状态，保持为false } + } else { + console.log('BGM保持暂停状态（视频已关闭）') } } // 处理webview打开事件 const handleWebviewOpen = () => { // 标记webview正在打开 - isWebviewOpening.value = true + playerStore.setWebviewOpening(true) console.log('Webview即将打开') - // 保存鼓声播放前的BGM状态，以便在退出webview时恢复 - if (isDrumPlaying.value) { - uni.setStorageSync('wasMusicPlayingBeforeDrum', wasMusicPlayingBeforeDrum.value) - } + // 注意：不要在这里保存鼓声播放前的BGM状态，因为此时BGM已经被暂停 + // 保持之前保存的playerStore.wasMusicPlayingBeforeDrum值 + console.log('当前鼓声播放状态:', playerStore.isDrumPlaying) + console.log('当前鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum) } // 处理webview关闭事件 const handleWebviewClose = () => { // 标记webview已关闭 - isWebviewOpening.value = false + playerStore.setWebviewOpening(false) console.log('Webview已关闭') } @@ -862,32 +820,49 @@ const handleWebviewClose = () => { const pauseBgm = (source = 'drum') => { // 只有当来源是鼓声时，才标记鼓声正在播放 if (source === 'drum') { - isDrumPlaying.value = true + playerStore.setDrumPlaying(true) // 保存原始BGM状态 - wasMusicPlayingBeforeDrum.value = isMusicPlaying.value + playerStore.saveMusicStateBeforeDrum() + console.log('保存鼓声播放前的BGM状态:', playerStore.isMusicPlaying) + } else if (source === 'webview') { + // 保存webview打开前的BGM状态 + playerStore.saveMusicStateBeforeWebview() + console.log('保存webview打开前的BGM状态:', playerStore.isMusicPlaying) + // 注意：不要在这里保存鼓声播放前的BGM状态，因为此时BGM已经被暂停 + // 保持之前保存的playerStore.wasMusicPlayingBeforeDrum值 + console.log('当前鼓声播放状态:', playerStore.isDrumPlaying) + console.log('当前鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum) + + // 确保webview打开时不会修改playerStore.wasMusicPlayingBeforeDrum的值 + // 只有在播放新的鼓声时，才会更新playerStore.wasMusicPlayingBeforeDrum的值 } - if (audioPlayer.value && isMusicPlaying.value) { + if (audioPlayer.value && playerStore.isMusicPlaying) { audioPlayer.value.pause() - isMusicPlaying.value = false + playerStore.setMusicPlaying(false) console.log(`全局BGM已暂停（${source === 'drum' ? '鼓声播放中' : 'webview打开中'}）`) } + + // 确保鼓声播放前的BGM状态不会被修改 + if (source === 'webview' && playerStore.isDrumPlaying) { + console.log('webview打开时，鼓声播放中，保持鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum) + } } // 恢复BGM（用于鼓声结束） const resumeBgm = () => { // 标记鼓声已停止播放 - isDrumPlaying.value = false + playerStore.setDrumPlaying(false) // 恢复BGM到原始状态 - if (audioPlayer.value && wasMusicPlayingBeforeDrum.value && !isMusicPlaying.value) { + if (audioPlayer.value && playerStore.restoreMusicStateAfterDrum() && !playerStore.isMusicPlaying) { try { const result = audioPlayer.value.play() // 检查play()方法是否返回Promise（Web平台） if (result && typeof result.then === 'function') { // Web平台：使用Promise处理 result.then(() => { - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) console.log('全局BGM已恢复播放（鼓声已结束）') }).catch(error => { console.error('BGM恢复播放失败（需要用户交互）:', error) @@ -895,7 +870,7 @@ const resumeBgm = () => { }) } else { // 其他平台：同步处理 - isMusicPlaying.value = true + playerStore.setMusicPlaying(true) console.log('全局BGM已恢复播放（鼓声已结束）') } } catch (error) { @@ -903,6 +878,10 @@ const resumeBgm = () => { // 不更新isMusicPlaying状态，保持为false } } + + // 注意：不要重置playerStore.wasMusicPlayingBeforeDrum的值 + // 因为这个值可能在webview场景中需要使用 + console.log('鼓声结束后，鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum) } // 使用scroll-view组件后，不再需要手动处理触摸事件 @@ -919,7 +898,7 @@ onUnmounted(() => {
音乐 @@ -999,7 +978,7 @@ onUnmounted(() => { :active="activeSceneIndex === 4" :scroll-position="scrollContainer?.value?.scrollTop || 0" :video-url="scenes[4].videoUrl" - :is-music-playing="isMusicPlaying" + :is-music-playing="playerStore.isMusicPlaying" :page-visit-uuid="pageVisitUuid" @collect-seal="collectSeal(4)" @video-open="handleVideoOpen" @@ -1015,13 +994,13 @@ onUnmounted(() => { :active="activeSceneIndex === 5" :scroll-position="scrollContainer?.value?.scrollTop || 0" :video-url="scenes[5].videoUrl" - :is-music-playing="isMusicPlaying" - :is-video-playing="isVideoPlaying" - :is-webview-opening="isWebviewOpening" + :is-music-playing="playerStore.isMusicPlaying" + :is-video-playing="playerStore.isVideoPlaying" + :is-webview-opening="playerStore.isWebviewOpening" :page-visit-uuid="pageVisitUuid" @collect-seal="collectSeal(5)" @height-changed="handleQianmenHeightChanged" - @video-open="handleVideoOpen" + @video-open="handleVideoOpen(true)" @video-close="handleVideoClose" @pause-bgm="(source) => pauseBgm(source)" @resume-bgm="resumeBgm" diff --git a/store/player.js b/store/player.js new file mode 100644 index 0000000..10adcf9 --- /dev/null +++ b/store/player.js @@ -0,0 +1,90 @@ +import { defineStore } from 'pinia' + +export const usePlayerStore = defineStore('player', { + state: () => ({ + // 音乐播放状态 + isMusicPlaying: false, + // 视频播放状态 + isVideoPlaying: false, + // 鼓声播放状态 + isDrumPlaying: false, + // webview打开状态 + isWebviewOpening: false, + // 视频打开前的BGM状态 + wasMusicPlayingBeforeVideo: false, + // 鼓声开始前的BGM状态 + wasMusicPlayingBeforeDrum: false, + // webview打开前的BGM状态 + wasMusicPlayingBeforeWebview: false + }), + + getters: { + // 计算是否禁用BGM控制按钮 + isBgmButtonDisabled: (state) => { + return state.isVideoPlaying || state.isDrumPlaying + } + }, + + actions: { + // 设置音乐播放状态 + setMusicPlaying(status) { + this.isMusicPlaying = status + }, + + // 设置视频播放状态 + setVideoPlaying(status) { + this.isVideoPlaying = status + }, + + // 设置鼓声播放状态 + setDrumPlaying(status) { + this.isDrumPlaying = status + }, + + // 设置webview打开状态 + setWebviewOpening(status) { + this.isWebviewOpening = status + }, + + // 保存视频打开前的BGM状态 + saveMusicStateBeforeVideo() { + this.wasMusicPlayingBeforeVideo = this.isMusicPlaying + }, + + // 保存鼓声开始前的BGM状态 + saveMusicStateBeforeDrum() { + this.wasMusicPlayingBeforeDrum = this.isMusicPlaying + }, + + // 保存webview打开前的BGM状态 + saveMusicStateBeforeWebview() { + this.wasMusicPlayingBeforeWebview = this.isMusicPlaying + }, + + // 恢复视频关闭后的BGM状态 + restoreMusicStateAfterVideo() { + return this.wasMusicPlayingBeforeVideo + }, + + // 恢复鼓声结束后的BGM状态 + restoreMusicStateAfterDrum() { + return this.wasMusicPlayingBeforeDrum + }, + + // 恢复webview关闭后的BGM状态 + restoreMusicStateAfterWebview() { + return this.wasMusicPlayingBeforeWebview + }, + + // 重置所有状态 + resetState() { + this.isMusicPlaying = false + this.isVideoPlaying = false + this.isDrumPlaying = false + this.isWebviewOpening = false + this.wasMusicPlayingBeforeVideo = false + this.wasMusicPlayingBeforeDrum = false + this.wasMusicPlayingBeforeWebview = false + } + } +}) \ No newline at end of file