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

main
fadeaway 8 months ago
parent 4d367aa722
commit 6a9f1253f1

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

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

Loading…
Cancel
Save