mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-24 08:07:23 +08:00
feat: 添加播放速度控制功能
现有播放器不支持改变播放速度,用户无法实现 0.5×、1.5×、2.0× 等快进/慢放需求。为了提升可用性和灵活性,决定在播放栏增加速度选择菜单,并支持 Media Session API 同步速率
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user