feat(播放控制): 添加播放队列的上一首和下一首功能

新增 `playNext` 和 `playPrevious` 函数,用于控制播放队列中的上一首和下一首歌曲。同时为播放按钮绑定点击事件,实现播放控制功能。
This commit is contained in:
Astrian Zheng 2025-05-25 14:19:41 +10:00
parent 595caa0956
commit 3bb49881d7
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA

View File

@ -55,6 +55,26 @@ function formatDetector() {
if (format === 'wav') { return 'WAV' } if (format === 'wav') { return 'WAV' }
return '未知格式' return '未知格式'
} }
function playNext() {
if (playQueueStore.currentIndex === playQueueStore.list.length - 1) {
console.log("at the bottom, pause")
playQueueStore.currentIndex = 0
playQueueStore.isPlaying = false
} else {
playQueueStore.currentIndex++
playQueueStore.isPlaying = true
}
}
function playPrevious() {
if (playQueueStore.currentTime < 5 && playQueueStore.currentIndex > 0) {
playQueueStore.currentIndex--
playQueueStore.isPlaying = true
} else {
playQueueStore.updatedCurrentTime = 0
}
}
</script> </script>
<template> <template>
@ -97,7 +117,7 @@ function formatDetector() {
<div class="flex-1 text-left"></div> <div class="flex-1 text-left"></div>
<div class="flex-2 text-center align-center justify-center gap-2 flex"> <div class="flex-2 text-center align-center justify-center gap-2 flex">
<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"> <button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25" @click="playPrevious">
<div class="w-6 h-6"> <div class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path <path
@ -133,7 +153,7 @@ function formatDetector() {
</div> </div>
</button> </button>
<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"> <button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25" @click="playNext">
<div class="w-6 h-6"> <div class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path <path