diff --git a/src/components/PlayerWebAudio.vue b/src/components/PlayerWebAudio.vue index 8374e16..1a14e4f 100644 --- a/src/components/PlayerWebAudio.vue +++ b/src/components/PlayerWebAudio.vue @@ -2,7 +2,7 @@ import { usePlayQueueStore } from '../stores/usePlayQueueStore' import { usePlayState } from '../stores/usePlayState' import { debugPlayer } from '../utils/debug' -import { watch, ref, onMounted, onUnmounted } from 'vue' +import { watch, ref, onMounted } from 'vue' import artistsOrganize from '../utils/artistsOrganize' const playQueue = usePlayQueueStore() @@ -82,11 +82,11 @@ class WebAudioPlayer { if ('mediaSession' in navigator) { navigator.mediaSession.setActionHandler('play', () => { console.log('Media session: play requested') - this.play() + playState.togglePlay(true) }) navigator.mediaSession.setActionHandler('pause', () => { console.log('Media session: pause requested') - this.pause() + playState.togglePlay(false) }) navigator.mediaSession.setActionHandler('stop', () => { console.log('Media session: stop requested') @@ -148,6 +148,7 @@ class WebAudioPlayer { if (!playState.actualPlaying) { // 如果实际正在播放,那么跳过音轨初始化阶段 debugPlayer("开始播放") + navigator.mediaSession.playbackState = 'playing' if (playState.playProgress !== 0) debugPlayer(`已经有所进度!${playState.playProgress}`) this.currentSource = this.context.createBufferSource() this.currentSource.buffer = this.audioBuffer[playQueue.currentTrack.song.cid] @@ -201,6 +202,19 @@ class WebAudioPlayer { const progress = this.context.currentTime - this.currentTrackStartTime playState.reportPlayProgress(progress) playState.reportCurrentTrackDuration(this.audioBuffer[playQueue.currentTrack.song.cid].duration) + + // 向浏览器回报 + if (('mediaSession' in navigator) && ('setPositionState' in navigator.mediaSession)) { + try { + navigator.mediaSession.setPositionState({ + duration: this.audioBuffer[playQueue.currentTrack.song.cid].duration || 0, + playbackRate: 1.0, + position: progress, + }) + } catch (error) { + debugPlayer('媒体会话位置更新失败:', error) + } + } }, 100) } @@ -212,6 +226,7 @@ class WebAudioPlayer { } pause() { + navigator.mediaSession.playbackState = 'paused' debugPlayer("尝试暂停播放") debugPlayer(this.currentSource) this.currentSource?.stop() @@ -263,6 +278,15 @@ onMounted(() => { watch(() => playQueue.currentTrack, () => { debugPlayer(`检测到当前播放曲目更新`) + navigator.mediaSession.playbackState = playState.isPlaying ? 'playing' : 'paused' + navigator.mediaSession.metadata = new MediaMetadata({ + title: playQueue.currentTrack.song.name, + artist: artistsOrganize(playQueue.currentTrack.song.artistes ?? []), + album: playQueue.currentTrack.album?.name, + artwork: [ + { src: playQueue.currentTrack.album?.coverUrl ?? "", sizes: '500x500', type: 'image/png' }, + ] + }) playerInstance.value?.loadResourceAndPlay() }) diff --git a/src/stores/usePlayState.ts b/src/stores/usePlayState.ts index e783c62..77abbf9 100644 --- a/src/stores/usePlayState.ts +++ b/src/stores/usePlayState.ts @@ -68,119 +68,6 @@ export const usePlayState = defineStore('playState', () => { actualPlaying.value = playing } - /*********** - * 媒体会话管理 - **********/ - // 设置当前播放曲目 - const setCurrentTrack = (track: QueueItem | null) => { - debugStore('设置当前曲目:', track?.song.name || 'null') - currentTrack.value = track - if (track) { - updateMediaSession(track) - } - } - - // 初始化媒体会话处理器 - const setupMediaSessionHandlers = () => { - if (!('mediaSession' in navigator) || mediaSessionInitialized.value) return - - debugStore('设置媒体会话处理器') - - navigator.mediaSession.setActionHandler('play', () => { - debugStore('媒体会话: 播放') - togglePlay(true) - }) - - navigator.mediaSession.setActionHandler('pause', () => { - debugStore('媒体会话: 暂停') - togglePlay(false) - }) - - // 上一首和下一首需要从外部传入回调 - mediaSessionInitialized.value = true - } - - // 设置上一首/下一首处理器 - const setTrackNavigationHandlers = ( - previousHandler: () => void, - nextHandler: () => void, - ) => { - if (!('mediaSession' in navigator)) return - - navigator.mediaSession.setActionHandler('previoustrack', () => { - debugStore('媒体会话: 上一首') - previousHandler() - }) - - navigator.mediaSession.setActionHandler('nexttrack', () => { - debugStore('媒体会话: 下一首') - nextHandler() - }) - } - - // 更新媒体会话信息 - const updateMediaSession = (track: QueueItem) => { - if (!('mediaSession' in navigator)) return - - debugStore('更新媒体会话:', track.song.name) - - try { - navigator.mediaSession.metadata = new MediaMetadata({ - title: track.song.name, - artist: artistsOrganize(track.song.artists ?? []), - album: track.album?.name, - artwork: [ - { - src: track.album?.coverUrl ?? '', - sizes: '500x500', - type: 'image/png', - }, - ], - }) - } catch (error) { - console.error('更新媒体会话元数据失败:', error) - } - } - - // 更新媒体会话播放状态 - const updateMediaSessionPlaybackState = () => { - if (!('mediaSession' in navigator)) return - - navigator.mediaSession.playbackState = isPlaying.value - ? 'playing' - : 'paused' - debugStore('媒体会话状态更新:', navigator.mediaSession.playbackState) - } - - // 更新媒体会话位置信息 - const updateMediaSessionPosition = () => { - if ( - !('mediaSession' in navigator) || - !('setPositionState' in navigator.mediaSession) - ) - return - - try { - navigator.mediaSession.setPositionState({ - duration: currentTrackDuration.value || 0, - playbackRate: 1.0, - position: playProgress.value, - }) - } catch (error) { - debugStore('媒体会话位置更新失败:', error) - } - } - - // 监听播放状态变化,自动更新媒体会话 - watch(isPlaying, () => { - updateMediaSessionPlaybackState() - }) - - // 监听播放进度变化,定期更新位置信息 - watch(playProgress, () => { - updateMediaSessionPosition() - }) - return { // 状态读取 isPlaying: playingState, @@ -198,13 +85,5 @@ export const usePlayState = defineStore('playState', () => { resetProgress, seekTo, reportActualPlaying, - - // 媒体会话方法 - setCurrentTrack, - setupMediaSessionHandlers, - setTrackNavigationHandlers, - updateMediaSession, - updateMediaSessionPlaybackState, - updateMediaSessionPosition, } })