hookehuyr

feat(AudioPlayer): 添加倍速播放功能并优化播放按钮样式

- 新增倍速播放控件,支持0.5x-2.0x多档调节
- 暴露倍速控制方法给父组件
- 修复播放按钮动画类名错误
......@@ -54,7 +54,7 @@
</button>
<button
@click="togglePlay"
:class="{'paused': !isPlaying, 'opacity-50 cursor-not-allowed': isLoading}"
:class="{'playing': isPlaying, 'opacity-50 cursor-not-allowed': isLoading}"
:disabled="isLoading"
class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 transition-colors shadow-lg"
>
......@@ -72,8 +72,17 @@
</button>
</div>
<!-- 播放列表按钮 -->
<div class="flex justify-end mt-4">
<!-- 倍速播放和播放列表按钮 -->
<div class="flex justify-between items-center mt-4">
<!-- 倍速播放控件 -->
<button
@click="cycleSpeed"
class="flex items-center space-x-1 text-gray-500 hover:text-gray-700 transition-colors px-2 py-1 rounded-md hover:bg-gray-100"
>
<span class="text-sm font-medium">{{ speed }}x</span>
</button>
<!-- 播放列表按钮 -->
<button @click="togglePlaylist" class="text-gray-500 hover:text-gray-700 transition-colors">
<font-awesome-icon icon="list" class="text-lg" />
</button>
......@@ -146,6 +155,7 @@ const volume = ref(100) // 音量值
const isPlaylistVisible = ref(false) // 播放列表显示状态
const speed = ref(1.0) // 播放速度
const meta_id = ref(null) // 音频meta_id
const speedOptions = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0] // 倍速选项
// 计算属性
const currentSong = computed(() => props.songs[currentIndex.value]) // 当前播放的歌曲
......@@ -484,6 +494,34 @@ watch([isPlaying, currentIndex], () => {
}
})
// 倍速播放相关方法
/**
* 循环切换播放速度
*/
const cycleSpeed = () => {
const currentIndex = speedOptions.indexOf(speed.value)
const nextIndex = (currentIndex + 1) % speedOptions.length
const newSpeed = speedOptions[nextIndex]
speed.value = newSpeed
if (audio.value) {
audio.value.playbackRate = newSpeed
}
}
/**
* 改变播放速度
* @param {number} newSpeed - 新的播放速度
*/
const changeSpeed = (newSpeed) => {
speed.value = newSpeed
if (audio.value) {
audio.value.playbackRate = newSpeed
}
}
// 暴露给父组件的方法
defineExpose({
......@@ -502,6 +540,8 @@ defineExpose({
isPlaying: () => isPlaying.value,
id: props.id,
getPlayer: () => audio.value,
changeSpeed, // 暴露倍速控制方法
getCurrentSpeed: () => speed.value, // 暴露获取当前速度方法
})
</script>
......@@ -554,7 +594,7 @@ button:not(:disabled) {
}
}
button.paused .fa-pause {
button.playing .fa-pause {
animation: pulse 1.5s infinite;
}
......