feat: 优化播放 修改为howler 修复搜索导致播放无限卡顿问题(#15)

- 优化了整个项目的播放
- 去除audio
- 优化歌词页 歌词同步时间

fixes #15
This commit is contained in:
alger
2024-12-12 22:18:52 +08:00
parent bb99049991
commit cebf313075
12 changed files with 199 additions and 182 deletions
+55
View File
@@ -0,0 +1,55 @@
import { Howl } from 'howler';
class AudioService {
private currentSound: Howl | null = null;
play(url: string) {
if (this.currentSound) {
this.currentSound.unload();
}
this.currentSound = null;
this.currentSound = new Howl({
src: [url],
html5: true,
autoplay: true,
volume: localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1,
});
return this.currentSound;
}
getCurrentSound() {
return this.currentSound;
}
stop() {
if (this.currentSound) {
this.currentSound.stop();
this.currentSound.unload();
this.currentSound = null;
}
}
// 监听播放
onPlay(callback: () => void) {
if (this.currentSound) {
this.currentSound.on('play', callback);
}
}
// 监听暂停
onPause(callback: () => void) {
if (this.currentSound) {
this.currentSound.on('pause', callback);
}
}
// 监听结束
onEnd(callback: () => void) {
if (this.currentSound) {
this.currentSound.on('end', callback);
}
}
}
export const audioService = new AudioService();