diff --git a/src/components/AudioPlayer/index.tsx b/src/components/AudioPlayer/index.tsx index 10481fb..016f778 100644 --- a/src/components/AudioPlayer/index.tsx +++ b/src/components/AudioPlayer/index.tsx @@ -11,7 +11,7 @@ export interface IAudioPlayerRef { } export default forwardRef(function AudioPlayer( - { src, autoPlay }: { src?: string; autoPlay?: boolean }, + { src, autoPlay, onEnded }: { src?: string; autoPlay?: boolean; onEnded?: () => void }, ref: React.Ref, ) { const [curTime, setCurTime] = useState('00:00'); @@ -45,6 +45,10 @@ export default forwardRef(function AudioPlayer( }); }; + const handleEnded = () => { + onEnded?.(); + }; + const handleSlideStart = () => { isDragingRef.current = true; }; @@ -86,6 +90,7 @@ export default forwardRef(function AudioPlayer( src={src} onLoadedMetadata={handleLoadedMetadata} onTimeUpdate={handleTimeUpdate} + onEnded={handleEnded} />
{musicInfo?.title}
-

{musicInfo?.artist}

+

+ {[musicInfo?.artist, musicInfo?.album].filter((str) => !!str).join(' / ')} +

diff --git a/src/components/SongList/index.tsx b/src/components/SongList/index.tsx index 1f29738..d699569 100644 --- a/src/components/SongList/index.tsx +++ b/src/components/SongList/index.tsx @@ -14,6 +14,18 @@ export default function SongList({ list }: { list: ISong[] }) { const [curSong, setCurSong] = useState(); const [playing, setPlaying] = useState(false); + // 上一首播放完毕,自动播放下一首 + const handleEnded = () => { + setPlaying(false); + if (list && list.length > 0) { + const curIndex = list.findIndex((song: ISong) => song.id === curSong?.id); + if (list[curIndex + 1]) { + setCurSong(list[curIndex + 1]); + setPlaying(true); + } + } + }; + const providerVal = { audioPlayer: audioPlayerRef?.current, songList: list, @@ -31,7 +43,7 @@ export default function SongList({ list }: { list: ISong[] }) { {list?.map((song: ISong) => )}
- +
);