fix(music-player): 修复音乐播放和歌词显示问题
-优化歌词解析逻辑,支持不同格式的歌词时间戳 - 修复设置当前音乐时的音频加载和播放问题 - 优化更新音乐 URL 的逻辑,确保平滑切换音源 - 修复了一些与音乐播放相关的潜在错误和不良行为
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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.currentMusic = music
|
|
||||||
|
|
||||||
// 检查播放列表中是否已存在该音乐
|
|
||||||
const index = this.playlist.findIndex(item => item.id === music.id)
|
|
||||||
if (index !== -1) {
|
|
||||||
this.currentIndex = index
|
|
||||||
} else {
|
|
||||||
this.addToPlaylist(music)
|
|
||||||
this.currentIndex = this.playlist.length - 1
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置音频源并播放
|
this.initAudio();
|
||||||
if (music.url) {
|
|
||||||
this.audio.src = music.url
|
// 在加载新音乐之前暂停并重置当前音频
|
||||||
this.play()
|
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) {
|
||||||
|
this.currentIndex = index;
|
||||||
|
} else {
|
||||||
|
this.addToPlaylist(music);
|
||||||
|
this.currentIndex = this.playlist.length - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (music.url) {
|
||||||
|
this.audio.src = music.url;
|
||||||
|
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 });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user