From d99ae28f8cc1bd37515643405c69da44ca2e3b8c Mon Sep 17 00:00:00 2001 From: Astrian Zheng Date: Mon, 26 May 2025 13:20:08 +1000 Subject: [PATCH] =?UTF-8?q?feat(=E6=92=AD=E6=94=BE=E5=99=A8):=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E9=9A=8F=E6=9C=BA=E6=92=AD=E6=94=BE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 实现播放队列的随机播放模式，包括： 1. 在 store 中添加 shuffleList 和 playMode 状态 2. 修改播放器组件以支持随机播放时的歌曲切换 3. 更新播放界面以显示随机播放队列 4. 添加随机播放按钮交互逻辑 当开启随机播放时，会生成随机播放列表并保持当前播放歌曲不变，关闭时可恢复原播放顺序。 --- src/components/Player.vue | 55 +++++++++++++++++++++++++--- src/pages/Playroom.vue | 65 +++++++++++++++++++++++++++------ src/stores/usePlayQueueStore.ts | 13 ++++++- 3 files changed, 114 insertions(+), 19 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index e552993..777233d 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -35,12 +35,19 @@ function artistsOrganize(list: string[]) { function setMetadata() { if ('mediaSession' in navigator) { + let current = (() => { + if (playQueueStore.playMode.shuffle) { + return playQueueStore.list[playQueueStore.shuffleList[playQueueStore.currentIndex]] + } else { + return playQueueStore.list[playQueueStore.currentIndex] + } + })() navigator.mediaSession.metadata = new MediaMetadata({ - title: playQueueStore.list[playQueueStore.currentIndex].song.name, - artist: artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []), - album: playQueueStore.list[playQueueStore.currentIndex].album?.name, + title: current.song.name, + artist: artistsOrganize(current.song.artists ?? []), + album: current.album?.name, artwork: [ - { src: playQueueStore.list[playQueueStore.currentIndex].album?.coverUrl ?? '', sizes: '500x500', type: 'image/png' }, + { src: current.album?.coverUrl ?? '', sizes: '500x500', type: 'image/png' }, ] }) @@ -140,12 +147,50 @@ watch(() => error.value, (newError) => { console.error('[Player] 可视化器错误:', newError) } }) + +// 切换播放模式 +watch(() => playQueueStore.playMode.shuffle, (isShuffle) => { + if (isShuffle) { + // 提取当前歌曲的索引和队列中总项目数 + const currentIndex = playQueueStore.currentIndex + const trackCount = playQueueStore.list.length + // 生成新的随机播放列表，该列表是原来列表的下标数组（保持原有的顺序不变，以便用户关闭随机播放时恢复原有队列） + // 将队列中剩余的项目随机排列，队列中更早的歌曲保持不变 + let shuffledList = [...Array(currentIndex).keys()] + // 如果 shuffleCurrent 被指定为 false 或 undefined，那么将当前歌曲放在新列表的开头 + if (!playQueueStore.shuffleCurrent) { + shuffledList.push(currentIndex) + } + + // 将剩余的项目列出来 + let shuffleSpace = [...Array(trackCount).keys()] + shuffleSpace = shuffleSpace.filter((item) => item > currentIndex) + console.log(shuffleSpace) + // 随机打乱剩余的项目 + shuffleSpace.sort(() => Math.random() - 0.5) + + // 拼接新队列 + shuffledList = shuffledList.concat(shuffleSpace) + + // 应用新的随机播放列表 + playQueueStore.shuffleList = shuffledList + } else { + // 将当前播放的歌曲的原来的索引赋给 currentIndex + playQueueStore.currentIndex = playQueueStore.shuffleList[playQueueStore.currentIndex] + } +})