Javascript 如何一次播放阵列中的一首歌曲

我正在构建一个简单的音乐播放器，但我失败的地方是试图一次从阵列中执行一个项目。我正在使用React H5音频播放器包播放音乐。我目前正在映射所有歌曲，但我不知道如何正确地一次播放一首。谢谢你的帮助。这件事我已经坚持了好几天了

import { SongContext } from '../../SongContext';

import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';

import './Player.css';

const Player = () => {
    const { songs } = useContext(SongContext);

    return (
        <>
            {songs.length > 0 &&
                songs.map((song) => (
                    <div className="player" key={song.id}>
                        <AudioPlayer
                            // autoPlay
                            // src={song.preview}
                            showJumpControls={false}
                            customVolumeControls={[]}
                            customAdditionalControls={[]}
                            onPlay={() => console.log('playing')}
                        />
                    </div>
                ))}
        </>
    );
};
export default Player;

从“../../SongContext”导入{SongContext}；
从“react-h5-audio-player”导入AudioPlayer；
导入'react-h5-audio-player/lib/styles.css'；
导入“/Player.css”；
常量播放器=（）=>{
const{songs}=useContext（SongContext）；
返回(
{songs.length>0&&
歌曲。地图（（歌曲）=>(
console.log（'playing'）}
/>
))}
);
};
导出默认播放器；

不要一次映射所有歌曲，按索引获取一首歌曲（

currentSong

），完成后，使用

onEnded

事件增加索引，以便播放下一首歌曲

示例（）：

constplayer=（）=>{
const{songs}=useContext（SongContext）；
const[currentSong，setCurrentSong]=useState（0）；
常量歌曲=歌曲[当前歌曲]；
如果（！song）返回null；//没有可用歌曲时不渲染播放器
返回(
console.log（'playing'）}
onEnded={（）=>setCurrentSong（i=>i+1）}
/>
);
};

这太完美了，谢谢！

const Player = () => {
  const { songs } = useContext(SongContext);
  const [currentSong, setCurrentSong] = useState(0);

  const song = songs[currentSong];
  
  if(!song) return null; // don't render the player when no song is available

  return (
    <div className="player">
      <AudioPlayer
        autoPlay
        src={song.preview}
        showJumpControls={false}
        customVolumeControls={[]}
        customAdditionalControls={[]}
        onPlay={() => console.log('playing')}
        onEnded={() => setCurrentSong(i => i + 1)}
      />
    </div>
  );
};