fix: 修改单曲页面播放逻辑

main
fadeaway 8 months ago
parent 4d367aa722
commit 6a9f1253f1

@ -11,7 +11,12 @@ export interface IAudioPlayerRef {
}
export default forwardRef(function AudioPlayer(
{ src, autoPlay, onEnded }: { src?: string; autoPlay?: boolean; onEnded?: () => void },
{
src,
autoPlay,
onEnded,
onSlideEnd,
}: { src?: string; autoPlay?: boolean; onEnded?: () => void; onSlideEnd?: () => void },
ref: React.Ref<IAudioPlayerRef>,
) {
const [curTime, setCurTime] = useState('00:00');
@ -56,8 +61,10 @@ export default forwardRef(function AudioPlayer(
const handleSlideEnd = () => {
if (audioRef?.current) {
audioRef.current.currentTime = Number(sliderRef?.current?.value || 0);
audioRef.current.play();
}
isDragingRef.current = false;
onSlideEnd?.();
};
const handleSlideChange = () => requestAnimationFrame(() => setSliderBgSize());

@ -28,6 +28,16 @@ export default function MusicPanel() {
}
};
// 播放完毕
const handleEnded = () => {
setPlaying(false);
};
// 结束拖动进度条
const handleSlideEnd = () => {
setPlaying(true);
};
useEffect(() => {
const { searchParams } = new URL(window.location.href);
setLoading(true);
@ -94,7 +104,7 @@ export default function MusicPanel() {
</p>
<div className="w-full mt-[12px] mb-[44px]">
<AudioPlayer ref={audioPlayerRef} src={musicInfo?.src} />
<AudioPlayer ref={audioPlayerRef} src={musicInfo?.src} onEnded={handleEnded} onSlideEnd={handleSlideEnd} />
</div>
</div>
</div>

Loading…
Cancel
Save