fix: 修复随机播放模式下预加载顺序错误的问题
- 修正 getNextIndex 在随机播放模式下返回正确的原始列表索引 - 简化预加载逻辑，因为 nextIndex 已经是正确的列表索引 - 保持 Player.vue 中更新歌曲信息时的索引计算逻辑 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
dcf13b2f07
commit
ae2d8875ad
SSH Key Fingerprint:
SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
|
|
@ -1,13 +1,12 @@
|
|||
<!-- Player.vue - 添加预加载功能 -->
|
||||
<script setup lang="ts">
|
||||
|
||||
import { usePlayQueueStore } from '../stores/usePlayQueueStore'
|
||||
import { useTemplateRef, watch, nextTick, computed } from 'vue'
|
||||
import { computed, nextTick, useTemplateRef, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useFavourites } from '../stores/useFavourites'
|
||||
import { usePlayQueueStore } from '../stores/usePlayQueueStore'
|
||||
|
||||
import PlayIcon from '../assets/icons/play.vue'
|
||||
import LoadingIndicator from '../assets/icons/loadingindicator.vue'
|
||||
import PlayIcon from '../assets/icons/play.vue'
|
||||
import { audioVisualizer, checkAndRefreshSongResource } from '../utils'
|
||||
|
||||
const playQueueStore = usePlayQueueStore()
|
||||
|
|
@ -19,13 +18,18 @@ const player = useTemplateRef('playerRef')
|
|||
console.log('[Player] 检查 store 方法:', {
|
||||
preloadNext: typeof playQueueStore.preloadNext,
|
||||
getPreloadedAudio: typeof playQueueStore.getPreloadedAudio,
|
||||
clearPreloadedAudio: typeof playQueueStore.clearPreloadedAudio
|
||||
clearPreloadedAudio: typeof playQueueStore.clearPreloadedAudio,
|
||||
})
|
||||
|
||||
// 获取当前歌曲的计算属性
|
||||
const currentTrack = computed(() => {
|
||||
if (playQueueStore.playMode.shuffle && playQueueStore.shuffleList.length > 0) {
|
||||
return playQueueStore.list[playQueueStore.shuffleList[playQueueStore.currentIndex]]
|
||||
if (
|
||||
playQueueStore.playMode.shuffle &&
|
||||
playQueueStore.shuffleList.length > 0
|
||||
) {
|
||||
return playQueueStore.list[
|
||||
playQueueStore.shuffleList[playQueueStore.currentIndex]
|
||||
]
|
||||
}
|
||||
|
||||
return playQueueStore.list[playQueueStore.currentIndex]
|
||||
|
|
@ -37,16 +41,22 @@ const currentAudioSrc = computed(() => {
|
|||
return track ? track.song.sourceUrl : ''
|
||||
})
|
||||
|
||||
watch(() => playQueueStore.isPlaying, (newValue) => {
|
||||
watch(
|
||||
() => playQueueStore.isPlaying,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
player.value?.play()
|
||||
setMetadata()
|
||||
} else {
|
||||
player.value?.pause()
|
||||
}
|
||||
else { player.value?.pause() }
|
||||
})
|
||||
},
|
||||
)
|
||||
|
||||
// 监听当前索引变化，处理预加载逻辑
|
||||
watch(() => playQueueStore.currentIndex, async () => {
|
||||
watch(
|
||||
() => playQueueStore.currentIndex,
|
||||
async () => {
|
||||
console.log('[Player] 当前索引变化:', playQueueStore.currentIndex)
|
||||
|
||||
// 检查是否可以使用预加载的音频
|
||||
|
|
@ -61,12 +71,19 @@ watch(() => playQueueStore.currentIndex, async () => {
|
|||
track.song,
|
||||
(updated) => {
|
||||
// 更新播放队列中的歌曲信息
|
||||
if (playQueueStore.list[playQueueStore.currentIndex]) {
|
||||
playQueueStore.list[playQueueStore.currentIndex].song = updated
|
||||
// 在随机播放模式下，currentIndex 是 shuffleList 的索引
|
||||
// 需要通过 shuffleList[currentIndex] 获取实际的 list 索引
|
||||
const actualIndex =
|
||||
playQueueStore.playMode.shuffle &&
|
||||
playQueueStore.shuffleList.length > 0
|
||||
? playQueueStore.shuffleList[playQueueStore.currentIndex]
|
||||
: playQueueStore.currentIndex
|
||||
if (playQueueStore.list[actualIndex]) {
|
||||
playQueueStore.list[actualIndex].song = updated
|
||||
}
|
||||
// 如果歌曲在收藏夹中，也更新收藏夹
|
||||
favourites.updateSongInFavourites(songId, updated)
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// 使用更新后的歌曲信息
|
||||
|
|
@ -119,7 +136,7 @@ watch(() => playQueueStore.currentIndex, async () => {
|
|||
await playQueueStore.preloadNext()
|
||||
|
||||
// 预加载完成后，检查播放队列是否有更新，同步到收藏夹
|
||||
playQueueStore.list.forEach(item => {
|
||||
playQueueStore.list.forEach((item) => {
|
||||
if (favourites.isFavourite(item.song.cid)) {
|
||||
favourites.updateSongInFavourites(item.song.cid, item.song)
|
||||
}
|
||||
|
|
@ -133,18 +150,23 @@ watch(() => playQueueStore.currentIndex, async () => {
|
|||
console.error('[Player] 预加载失败:', error)
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
},
|
||||
)
|
||||
|
||||
function artistsOrganize(list: string[]) {
|
||||
if (list.length === 0) { return '未知音乐人' }
|
||||
return list.map((artist) => {
|
||||
if (list.length === 0) {
|
||||
return '未知音乐人'
|
||||
}
|
||||
return list
|
||||
.map((artist) => {
|
||||
return artist
|
||||
}).join(' / ')
|
||||
})
|
||||
.join(' / ')
|
||||
}
|
||||
|
||||
function setMetadata() {
|
||||
if ('mediaSession' in navigator) {
|
||||
let current = currentTrack.value
|
||||
const current = currentTrack.value
|
||||
if (!current) return
|
||||
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
|
|
@ -152,8 +174,12 @@ function setMetadata() {
|
|||
artist: artistsOrganize(current.song.artists ?? []),
|
||||
album: current.album?.name,
|
||||
artwork: [
|
||||
{ src: current.album?.coverUrl ?? '', sizes: '500x500', type: 'image/png' },
|
||||
]
|
||||
{
|
||||
src: current.album?.coverUrl ?? '',
|
||||
sizes: '500x500',
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
navigator.mediaSession.setActionHandler('previoustrack', playPrevious)
|
||||
|
|
@ -163,16 +189,21 @@ function setMetadata() {
|
|||
playQueueStore.currentTime = player.value?.currentTime ?? 0
|
||||
}
|
||||
|
||||
watch(() => playQueueStore.updatedCurrentTime, (newValue) => {
|
||||
if (newValue === null) { return }
|
||||
watch(
|
||||
() => playQueueStore.updatedCurrentTime,
|
||||
(newValue) => {
|
||||
if (newValue === null) {
|
||||
return
|
||||
}
|
||||
if (player.value) player.value.currentTime = newValue
|
||||
playQueueStore.updatedCurrentTime = null
|
||||
})
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
function playNext() {
|
||||
if (playQueueStore.currentIndex === playQueueStore.list.length - 1) {
|
||||
console.log("at the bottom, pause")
|
||||
console.log('at the bottom, pause')
|
||||
playQueueStore.currentIndex = 0
|
||||
if (playQueueStore.playMode.repeat === 'all') {
|
||||
playQueueStore.currentIndex = 0
|
||||
|
|
@ -188,11 +219,17 @@ function playNext() {
|
|||
}
|
||||
|
||||
function playPrevious() {
|
||||
if (player.value && (player.value.currentTime ?? 0) < 5 && playQueueStore.currentIndex > 0) {
|
||||
if (
|
||||
player.value &&
|
||||
(player.value.currentTime ?? 0) < 5 &&
|
||||
playQueueStore.currentIndex > 0
|
||||
) {
|
||||
playQueueStore.currentIndex--
|
||||
playQueueStore.isPlaying = true
|
||||
} else {
|
||||
if (player.value) { player.value.currentTime = 0 }
|
||||
if (player.value) {
|
||||
player.value.currentTime = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -209,8 +246,10 @@ function updateCurrentTime() {
|
|||
const preloadTrigger = (config.preloadTrigger || 50) / 100 // 转换为小数
|
||||
const remainingTimeThreshold = config.remainingTimeThreshold || 30
|
||||
|
||||
if ((progress > preloadTrigger || remainingTime < remainingTimeThreshold) && !playQueueStore.isPreloading) {
|
||||
|
||||
if (
|
||||
(progress > preloadTrigger || remainingTime < remainingTimeThreshold) &&
|
||||
!playQueueStore.isPreloading
|
||||
) {
|
||||
try {
|
||||
if (typeof playQueueStore.preloadNext === 'function') {
|
||||
playQueueStore.preloadNext()
|
||||
|
|
@ -232,13 +271,18 @@ const { barHeights, connectAudio, isAnalyzing, error } = audioVisualizer({
|
|||
bassBoost: 0.8,
|
||||
midBoost: 1.2,
|
||||
trebleBoost: 1.4,
|
||||
threshold: 0
|
||||
threshold: 0,
|
||||
})
|
||||
|
||||
console.log('[Player] audioVisualizer 返回值:', { barHeights: barHeights.value, isAnalyzing: isAnalyzing.value })
|
||||
console.log('[Player] audioVisualizer 返回值:', {
|
||||
barHeights: barHeights.value,
|
||||
isAnalyzing: isAnalyzing.value,
|
||||
})
|
||||
|
||||
// 监听播放列表变化
|
||||
watch(() => playQueueStore.list.length, async (newLength) => {
|
||||
watch(
|
||||
() => playQueueStore.list.length,
|
||||
async (newLength) => {
|
||||
console.log('[Player] 播放列表长度变化:', newLength)
|
||||
if (newLength === 0) {
|
||||
console.log('[Player] 播放列表为空，跳过连接')
|
||||
|
|
@ -253,7 +297,7 @@ watch(() => playQueueStore.list.length, async (newLength) => {
|
|||
console.log('[Player] 音频元素状态:', {
|
||||
src: player.value.src?.substring(0, 50) + '...',
|
||||
readyState: player.value.readyState,
|
||||
paused: player.value.paused
|
||||
paused: player.value.paused,
|
||||
})
|
||||
connectAudio(player.value)
|
||||
} else {
|
||||
|
|
@ -271,29 +315,42 @@ watch(() => playQueueStore.list.length, async (newLength) => {
|
|||
if (player.value) {
|
||||
initializeVolume()
|
||||
}
|
||||
})
|
||||
},
|
||||
)
|
||||
|
||||
// 监听音频元素变化
|
||||
watch(() => player.value, (audioElement) => {
|
||||
watch(
|
||||
() => player.value,
|
||||
(audioElement) => {
|
||||
if (audioElement && playQueueStore.list.length > 0) {
|
||||
connectAudio(audioElement)
|
||||
}
|
||||
})
|
||||
},
|
||||
)
|
||||
|
||||
// 监听可视化器数据变化
|
||||
watch(() => barHeights.value, (newHeights) => {
|
||||
watch(
|
||||
() => barHeights.value,
|
||||
(newHeights) => {
|
||||
playQueueStore.visualizer = newHeights
|
||||
}, { deep: true })
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
// 监听错误
|
||||
watch(() => error.value, (newError) => {
|
||||
watch(
|
||||
() => error.value,
|
||||
(newError) => {
|
||||
if (newError) {
|
||||
console.error('[Player] 可视化器错误:', newError)
|
||||
}
|
||||
})
|
||||
},
|
||||
)
|
||||
|
||||
// 切换播放模式
|
||||
watch(() => playQueueStore.playMode.shuffle, (isShuffle) => {
|
||||
watch(
|
||||
() => playQueueStore.playMode.shuffle,
|
||||
(isShuffle) => {
|
||||
if (isShuffle) {
|
||||
const currentIndex = playQueueStore.currentIndex
|
||||
const trackCount = playQueueStore.list.length
|
||||
|
|
@ -302,8 +359,10 @@ watch(() => playQueueStore.playMode.shuffle, (isShuffle) => {
|
|||
let shuffledList = [...Array(currentIndex).keys()]
|
||||
|
||||
// 2. 构建待打乱的列表
|
||||
let shuffleSpace = [...Array(trackCount).keys()].filter(index =>
|
||||
playQueueStore.shuffleCurrent ? index >= currentIndex : index > currentIndex
|
||||
const shuffleSpace = [...Array(trackCount).keys()].filter((index) =>
|
||||
playQueueStore.shuffleCurrent
|
||||
? index >= currentIndex
|
||||
: index > currentIndex,
|
||||
)
|
||||
|
||||
// 3. 随机打乱
|
||||
|
|
@ -324,7 +383,8 @@ watch(() => playQueueStore.playMode.shuffle, (isShuffle) => {
|
|||
playQueueStore.shuffleCurrent = undefined
|
||||
} else {
|
||||
// 退出随机播放：恢复当前播放曲目的原索引
|
||||
playQueueStore.currentIndex = playQueueStore.shuffleList[playQueueStore.currentIndex]
|
||||
playQueueStore.currentIndex =
|
||||
playQueueStore.shuffleList[playQueueStore.currentIndex]
|
||||
}
|
||||
|
||||
// 切换播放模式后重新预加载
|
||||
|
|
@ -332,7 +392,8 @@ watch(() => playQueueStore.playMode.shuffle, (isShuffle) => {
|
|||
playQueueStore.clearAllPreloadedAudio()
|
||||
playQueueStore.preloadNext()
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
)
|
||||
|
||||
function getCurrentTrack() {
|
||||
return currentTrack.value
|
||||
|
|
@ -343,7 +404,7 @@ function initializeVolume() {
|
|||
if (player.value) {
|
||||
const savedVolume = localStorage.getItem('audioVolume')
|
||||
if (savedVolume) {
|
||||
const volumeValue = parseFloat(savedVolume)
|
||||
const volumeValue = Number.parseFloat(savedVolume)
|
||||
player.value.volume = volumeValue
|
||||
console.log('[Player] 初始化音量:', volumeValue)
|
||||
} else {
|
||||
|
|
@ -369,7 +430,7 @@ function syncVolumeFromStorage() {
|
|||
if (player.value) {
|
||||
const savedVolume = localStorage.getItem('audioVolume')
|
||||
if (savedVolume) {
|
||||
const volumeValue = parseFloat(savedVolume)
|
||||
const volumeValue = Number.parseFloat(savedVolume)
|
||||
if (player.value.volume !== volumeValue) {
|
||||
player.value.volume = volumeValue
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { defineStore } from "pinia"
|
||||
import { ref, computed } from "vue"
|
||||
import { checkAndRefreshSongResource } from "../utils"
|
||||
import { defineStore } from 'pinia'
|
||||
import { computed, ref } from 'vue'
|
||||
import { checkAndRefreshSongResource } from '../utils'
|
||||
|
||||
export const usePlayQueueStore = defineStore('queue', () => {
|
||||
const list = ref<QueueItem[]>([])
|
||||
|
|
@ -14,11 +14,11 @@ export const usePlayQueueStore = defineStore('queue', () => {
|
|||
const visualizer = ref<number[]>([0, 0, 0, 0, 0, 0])
|
||||
const shuffleList = ref<number[]>([])
|
||||
const playMode = ref<{
|
||||
shuffle: boolean,
|
||||
shuffle: boolean
|
||||
repeat: 'off' | 'single' | 'all'
|
||||
}>({
|
||||
shuffle: false,
|
||||
repeat: 'off'
|
||||
repeat: 'off',
|
||||
})
|
||||
const shuffleCurrent = ref<boolean | undefined>(undefined)
|
||||
|
||||
|
|
@ -36,10 +36,13 @@ export const usePlayQueueStore = defineStore('queue', () => {
|
|||
}
|
||||
|
||||
if (playMode.value.shuffle && shuffleList.value.length > 0) {
|
||||
const currentShuffleIndex = shuffleList.value.indexOf(currentIndex.value)
|
||||
// 当前在 shuffleList 中的位置
|
||||
const currentShuffleIndex = currentIndex.value
|
||||
if (currentShuffleIndex < shuffleList.value.length - 1) {
|
||||
// 返回下一个位置对应的原始 list 索引
|
||||
return shuffleList.value[currentShuffleIndex + 1]
|
||||
} else if (playMode.value.repeat === 'all') {
|
||||
// 返回第一个位置对应的原始 list 索引
|
||||
return shuffleList.value[0]
|
||||
}
|
||||
return -1
|
||||
|
|
@ -56,19 +59,14 @@ export const usePlayQueueStore = defineStore('queue', () => {
|
|||
|
||||
// 预加载下一首歌
|
||||
const preloadNext = async () => {
|
||||
|
||||
const nextIndex = getNextIndex.value
|
||||
if (nextIndex === -1) {
|
||||
return
|
||||
}
|
||||
|
||||
// 获取下一首歌曲对象
|
||||
let nextSong
|
||||
if (playMode.value.shuffle && shuffleList.value.length > 0) {
|
||||
nextSong = list.value[shuffleList.value[nextIndex]]
|
||||
} else {
|
||||
nextSong = list.value[nextIndex]
|
||||
}
|
||||
// nextIndex 已经是原始 list 中的索引
|
||||
const nextSong = list.value[nextIndex]
|
||||
|
||||
if (!nextSong || !nextSong.song) {
|
||||
return
|
||||
|
|
@ -96,18 +94,16 @@ export const usePlayQueueStore = defineStore('queue', () => {
|
|||
nextSong.song,
|
||||
(updated) => {
|
||||
// 更新播放队列中的歌曲信息
|
||||
const actualIndex = playMode.value.shuffle && shuffleList.value.length > 0
|
||||
? shuffleList.value[nextIndex]
|
||||
: nextIndex
|
||||
if (list.value[actualIndex]) {
|
||||
list.value[actualIndex].song = updated
|
||||
// nextIndex 已经是原始 list 中的索引
|
||||
if (list.value[nextIndex]) {
|
||||
list.value[nextIndex].song = updated
|
||||
}
|
||||
|
||||
// 如果歌曲在收藏夹中，也更新收藏夹
|
||||
// 注意：这里不直接导入 favourites store 以避免循环依赖
|
||||
// 改为触发一个事件或者在调用方处理
|
||||
console.log('[Store] 预加载时需要更新收藏夹:', updated.name)
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const audio = new Audio()
|
||||
|
|
@ -140,7 +136,6 @@ export const usePlayQueueStore = defineStore('queue', () => {
|
|||
|
||||
// 使用更新后的音频源
|
||||
audio.src = updatedSong.sourceUrl!
|
||||
|
||||
} catch (error) {
|
||||
console.error('[Store] 预加载过程出错:', error)
|
||||
isPreloading.value = false
|
||||
|
|
@ -190,7 +185,7 @@ export const usePlayQueueStore = defineStore('queue', () => {
|
|||
progress: preloadProgress.value,
|
||||
cacheSize: preloadedAudio.value.size,
|
||||
cachedSongs: Array.from(preloadedAudio.value.keys()),
|
||||
nextIndex: getNextIndex.value
|
||||
nextIndex: getNextIndex.value,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -217,6 +212,6 @@ export const usePlayQueueStore = defineStore('queue', () => {
|
|||
clearPreloadedAudio,
|
||||
clearAllPreloadedAudio,
|
||||
limitPreloadCache,
|
||||
debugPreloadState
|
||||
debugPreloadState,
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user