fix(AudioPlayer):

1. app init error;
2. dont show audio artist when initial;
3. journal detial paly error;

src/app/vol/[journalId]/page.tsx

@@ -71,7 +71,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
         />
 
         {/* 卡片 */}
-        <SongCardList className="my-40px w-full" songList={songList} />
+        <SongCardList className="my-40px w-full" listId={journalInfo.id} songList={songList} />
 
         <Comment
           journalId={journalInfo.id}

src/components/AudioPlayer/Player.tsx

@@ -26,7 +26,7 @@ export default function AudioPlayer({ className }: { className?: string }) {
 
   const audio: SongInfo = playQueue.find((item) => item.id === audioId) || playQueue[0];
 
-  const audioRef = useRef(new Audio(audio.src));
+  const audioRef = useRef(new Audio(audio?.src || ''));
   const isReady = useRef<boolean>(false); // 是否加载过组件
   const [isPlaying, setIsPlaying] = useState(false); // 播放状态
   const [trackProgress, setTrackProgress] = useState<number>(0); // 音频进度(s)
@@ -88,7 +88,7 @@ export default function AudioPlayer({ className }: { className?: string }) {
     };
 
     audioRef.current.pause();
-    audioRef.current = new Audio(audio.src);
+    audioRef.current = new Audio(audio?.src || '');
     audioRef.current.addEventListener('timeupdate', onTimeUpdate);
 
     if (isReady.current) {

src/components/AudioPlayer/PlayerControl.tsx

@@ -58,8 +58,10 @@ export default function AudioPlayer({
       <div className="h-full ml-[27px] mr-[44px] py-[14px]">
         <AutoScrollContainer key={audio?.id} auto hover width="140px" speed={50}>
           <div className="w-auto h-auto">
-            <p className="text-[17px] leading-[23.8px] text-[rgba(0,0,0,0.95)]">{audio?.title}</p>
+            <p className="text-[17px] leading-[23.8px] text-[rgba(0,0,0,0.95)]">{audio?.title ?? ''}</p>
-            <p className="text-[13px] leading-[18.2px] text-[rgba(0,0,0,0.7)]">{`${audio?.artist}/${audio?.album}`}</p>
+            {audio?.artist && audio?.album && (
+              <p className="text-[13px] leading-[18.2px] text-[rgba(0,0,0,0.7)]">{`${audio.artist}/${audio.album}`}</p>
+            )}
           </div>
         </AutoScrollContainer>
       </div>

src/components/Song/SongCardList.tsx

@@ -15,31 +15,31 @@ interface Props {
 }
 
 export default function JournalItem({ listId, songList, className }: Props) {
-  const { setPlayList, audioIndex, playListId, setAudioIndex } = useAudioStore(
+  const { setPlayList, setAudioId, playListId, audioId } = useAudioStore(
     useShallow((state) => ({
       setplayList: state.setPlayList,
-      audioIndex: state.audioIndex,
+      setAudioId: state.setAudioId,
-      setAudioIndex: state.setAudioIndex,
+      audioId: state.audioId,
       playList: state.playList,
       setPlayList: state.setPlayList,
       playListId: state.playListId,
     })),
   );
 
-  const handlePlayList = (index: number) => {
+  const handlePlayList = (id: string) => {
     // 正在播放当前歌单
     if (playListId !== listId) {
       setPlayList({ id: listId, list: songList });
     }
 
     // 正在播放其他歌单
-    setAudioIndex(index);
+    setAudioId(id);
   };
 
   return (
     <div className={`${className}`}>
-      {songList.map((song: SongInfo, index: number) => (
+      {songList.map((song: SongInfo) => (
-        <SongCard key={song.id} {...song} onPlay={() => handlePlayList(index)} />
+        <SongCard key={song.id} {...song} onPlay={(audioId: string) => handlePlayList(audioId)} />
       ))}
     </div>
   );