feat: 添加播放速度控制功能

现有播放器不支持改变播放速度,用户无法实现 0.5×、1.5×、2.0× 等快进/慢放需求。为了提升可用性和灵活性,决定在播放栏增加速度选择菜单,并支持 Media Session API 同步速率
This commit is contained in:
Java-wyx
2025-05-19 17:59:20 +08:00
parent 4d371df510
commit 655473699a
5 changed files with 115 additions and 4 deletions
@@ -161,6 +161,23 @@
</template>
{{ t('player.playBar.playList') }}
</n-tooltip>
<!-- 添加播放速度控制按钮 -->
<n-dropdown
v-if="!isMobile"
:options="playbackRateOptions"
@select="handlePlaybackRateChange"
trigger="click"
:z-index="9999999"
>
<n-tooltip trigger="hover" :z-index="9999999">
<template #trigger>
<div class="play-speed">
<span class="speed-button">{{ playbackRate }}x</span>
</div>
</template>
{{ t('player.playBar.playbackSpeed') }}
</n-tooltip>
</n-dropdown>
</div>
<!-- 播放音乐 -->
<music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
@@ -319,6 +336,23 @@ const playModeText = computed(() => {
}
});
// 播放速度控制
const playbackRate = ref(1.0);
const playbackRateOptions = [
{ label: '0.5x', key: 0.5 },
{ label: '0.75x', key: 0.75 },
{ label: '1.0x', key: 1.0 },
{ label: '1.25x', key: 1.25 },
{ label: '1.5x', key: 1.5 },
{ label: '2.0x', key: 2.0 }
];
const handlePlaybackRateChange = (rate: number) => {
playbackRate.value = rate;
audioService.setPlaybackRate(rate);
};
// 切换播放模式
const togglePlayMode = () => {
playerStore.togglePlayMode();
@@ -702,4 +736,24 @@ const openPlayListDrawer = () => {
color: white;
animation: spin 1s linear infinite;
}
.play-speed {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0 8px;
}
.speed-button {
font-size: 14px;
color: var(--text-color);
padding: 4px 8px;
border-radius: 4px;
background: var(--hover-color);
}
.speed-button:hover {
background: var(--hover-color-dark);
}
</style>