v1.3.5
1、bgm、鼓声、视频的播放统一通过pinia进行管理 2、优化bgm播放、点击鼓声、暂停bgm、进入webview及视频播放后退出时的bgm控制
This commit is contained in:
parent
2c686db5a5
commit
6c2f6f31f1
|
|
@ -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打开失败
|
||||
|
|
|
|||
|
|
@ -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参数
|
||||
}
|
||||
|
||||
// 关闭视频播放器
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
|||
<!-- 音乐控制按钮 -->
|
||||
<div
|
||||
class="music-control"
|
||||
:class="{ 'music-playing': isMusicPlaying, 'disabled': isBgmButtonDisabled }"
|
||||
:class="{ 'music-playing': playerStore.isMusicPlaying, 'disabled': isBgmButtonDisabled }"
|
||||
@click="toggleMusic"
|
||||
>
|
||||
<img src="/static/images/music_on.png" alt="音乐" class="music-icon" />
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue