feat: 期刊歌曲自动播放下一首

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<IAudioPlayerRef>,
 ) {
   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}
       />
       <input
         ref={sliderRef}

src/components/MusicPanel/index.tsx

@@ -58,7 +58,9 @@ export default function MusicPanel(props: { musicInfo: ISong }) {
         </div>
       </div>
       <h5 className="mt-[9px] font-medium text-[20px] leading-[28px] w-full">{musicInfo?.title}</h5>
-      <p className="mt-[3px] text-[12px] text-[#ffffffb2] w-full">{musicInfo?.artist}</p>
+      <p className="mt-[3px] text-[12px] text-[#ffffffb2] w-full">
+        {[musicInfo?.artist, musicInfo?.album].filter((str) => !!str).join(' / ')}
+      </p>
 
       <div className="w-full mt-[18px] mb-[46px]">
         <AudioPlayer ref={audioPlayerRef} src={musicInfo?.src} />

src/components/SongList/index.tsx

@@ -14,6 +14,18 @@ export default function SongList({ list }: { list: ISong[] }) {
   const [curSong, setCurSong] = useState<ISong | undefined>();
   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) => <SongItem key={song.id} data={song} />)}
 
       <div className="hidden">
-        <AudioPlayer ref={audioPlayerRef} autoPlay={false} src={curSong?.src} />
+        <AudioPlayer ref={audioPlayerRef} autoPlay={false} src={curSong?.src} onEnded={handleEnded} />
       </div>
     </JournalAudioContext.Provider>
   );