Astrian/msr-mod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(Player): 添加缓冲状态指示器

Browse Source 
在播放器中添加了缓冲状态指示器，当音频缓冲时显示动画，提升用户体验
This commit is contained in:
Astrian Zheng 2025-05-25 00:10:23 +10:00
parent 05070e3322
commit 956fef1d8a
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Player.vue
View File

@ -16,6 +16,7 @@ watch(() => playQueueStore.isPlaying, (newValue) => {
watch(() => playQueueStore.currentIndex, () => {
setMetadata()
playQueueStore.isBuffering = true
})
function artistsOrganize(list: string[]) {
@ -65,7 +66,9 @@ function playPrevious() {
<div>
<audio
:src="playQueueStore.list[playQueueStore.currentIndex] ? playQueueStore.list[playQueueStore.currentIndex].song.sourceUrl : ''"
ref="playerRef" autoplay v-if="playQueueStore.list.length !== 0" @ended="playNext" @pause="playQueueStore.isPlaying = false" @play="playQueueStore.isPlaying = true">
ref="playerRef" autoplay v-if="playQueueStore.list.length !== 0" @ended="playNext"
@pause="playQueueStore.isPlaying = false" @play="playQueueStore.isPlaying = true"
@canplaythrough="playQueueStore.isBuffering = false" @waiting="playQueueStore.isBuffering = true">
</audio>
<div
@ -79,7 +82,17 @@ function playPrevious() {
playQueueStore.isPlaying = !playQueueStore.isPlaying
}">
<div class="w-4 h-4" v-if="playQueueStore.isPlaying">
<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 200 200" v-if="playQueueStore.isBuffering === true">
<circle fill="none" stroke-opacity="1" stroke="#FFFFFF" stroke-width=".5" cx="100" cy="100" r="0">
<animate attributeName="r" calcMode="spline" dur="2" values="1;80" keyTimes="0;1" keySplines="0 .2 .5 1"
repeatCount="indefinite"></animate>
<animate attributeName="stroke-width" calcMode="spline" dur="2" values="0;25" keyTimes="0;1"
keySplines="0 .2 .5 1" repeatCount="indefinite"></animate>
<animate attributeName="stroke-opacity" calcMode="spline" dur="2" values="1;0" keyTimes="0;1"
keySplines="0 .2 .5 1" repeatCount="indefinite"></animate>
</circle>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" v-else>
<path d="M6 5H8V19H6V5ZM16 5H18V19H16V5Z"></path>
</svg>
</div>

3
src/stores/usePlayQueueStore.ts
View File

@ -6,6 +6,7 @@ export const usePlayQueueStore = defineStore('queue', () =>{
const currentIndex = ref<number>(0)
const isPlaying = ref<boolean>(false)
const queueReplaceLock = ref<boolean>(false)
const isBuffering = ref<boolean>(false)
return { list, currentIndex, isPlaying, queueReplaceLock }
return { list, currentIndex, isPlaying, queueReplaceLock, isBuffering }
})