fix(music-player): 修复音乐播放和歌词显示问题

-优化歌词解析逻辑,支持不同格式的歌词时间戳
- 修复设置当前音乐时的音频加载和播放问题
- 优化更新音乐 URL 的逻辑,确保平滑切换音源
- 修复了一些与音乐播放相关的潜在错误和不良行为
This commit is contained in:
ikmkj
2025-07-26 01:20:28 +08:00
parent 823fdf3245
commit 0fbed14ea7
2 changed files with 46 additions and 35 deletions

View File

@@ -380,11 +380,13 @@ const loopModeText = computed(() => {
// 解析歌词 // 解析歌词
const parsedLyric = computed(() => { const parsedLyric = computed(() => {
if (!currentMusic.value || !currentMusic.value.lyric) return []; if (!currentMusic.value || typeof currentMusic.value.lyric !== 'string') {
return [];
}
const lyric = currentMusic.value.lyric; const lyric = currentMusic.value.lyric;
const lines = lyric.split('\n'); const lines = lyric.split('\n');
const result = []; const result = [];
const timeRegExp = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/g; const timeRegExp = /\[(\d{2}):(\d{2})\.(\d+)\]/g;
for (const line of lines) { for (const line of lines) {
const text = line.replace(timeRegExp, '').trim(); const text = line.replace(timeRegExp, '').trim();
@@ -394,8 +396,8 @@ const parsedLyric = computed(() => {
while ((match = timeRegExp.exec(line)) !== null) { while ((match = timeRegExp.exec(line)) !== null) {
const min = parseInt(match, 10); const min = parseInt(match, 10);
const sec = parseInt(match, 10); const sec = parseInt(match, 10);
const ms = parseInt((match || '0').padEnd(3, '0'), 10); const msStr = match;
const time = min * 60 + sec + ms / 1000; const time = min * 60 + sec + parseFloat('0.' + msStr);
result.push({ time, text }); result.push({ time, text });
} }
} }
@@ -574,7 +576,7 @@ watch(() => currentMusic.value?.id, (newId) => {
lyricLines.value = {} lyricLines.value = {}
if (isExpanded.value) expandedActiveTab.value = 'lyric' if (isExpanded.value) expandedActiveTab.value = 'lyric'
} }
}, { immediate: true }) })
</script> </script>
<style scoped> <style scoped>

View File

@@ -44,33 +44,43 @@ export const usePlayerStore = defineStore('player', {
// 设置当前音乐 // 设置当前音乐
async setCurrentMusic(music) { async setCurrentMusic(music) {
if (!music) return if (!music || (this.currentMusic && this.currentMusic.id === music.id && this.isPlaying)) {
return;
}
this.initAudio() this.initAudio();
this.currentMusic = music
// 检查播放列表中是否已存在该音乐 // 在加载新音乐之前暂停并重置当前音频
const index = this.playlist.findIndex(item => item.id === music.id) if (this.audio) {
this.pause();
this.audio.src = ''; // 清空旧的音频源
}
this.currentMusic = { ...music };
this.isPlaying = false;
this.currentTime = 0;
this.duration = 0;
const index = this.playlist.findIndex(item => item.id === music.id);
if (index !== -1) { if (index !== -1) {
this.currentIndex = index this.currentIndex = index;
} else { } else {
this.addToPlaylist(music) this.addToPlaylist(music);
this.currentIndex = this.playlist.length - 1 this.currentIndex = this.playlist.length - 1;
} }
// 设置音频源并播放
if (music.url) { if (music.url) {
this.audio.src = music.url this.audio.src = music.url;
this.play() this.audio.load(); // 明确加载新音频
this.play();
// 调用播放API记录播放次数
try { try {
await playMusic(music.id) await playMusic(music.id);
} catch (error) { } catch (error) {
console.error('记录播放失败:', error) console.error('记录播放失败:', error);
} }
} else { } else {
console.error('音乐URL不存在') console.error('音乐URL不存在');
} }
}, },
@@ -253,18 +263,17 @@ export const usePlayerStore = defineStore('player', {
// 更新音乐URL // 更新音乐URL
updateMusicUrl(id, url) { updateMusicUrl(id, url) {
// 更新当前音乐的URL const musicInPlaylist = this.playlist.find(item => item.id === id);
if (this.currentMusic && this.currentMusic.id === id) { if (musicInPlaylist) {
this.currentMusic.url = url musicInPlaylist.url = url;
if (this.audio) {
this.audio.src = url
}
} }
// 更新播放列表中的URL if (this.currentMusic && this.currentMusic.id === id) {
const index = this.playlist.findIndex(item => item.id === id) this.currentMusic.url = url;
if (index !== -1) { // 如果是当前播放的音乐,则重新设置音频源并播放
this.playlist[index].url = url if (this.audio && this.audio.src !== url) {
this.setCurrentMusic({ ...this.currentMusic, url });
}
} }
}, },