How to play one song from array at a time react js

I am building a simple music player but where I fail is at trying to execute one item from the array at a time. I am using React H5 Audio Player package to play the music. I am currently mapping through all the songs but I don’t know how to properly play one at a time. I appreciate any help. I’ve been stuck on this for a few days.


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;

73 thoughts on “How to play one song from array at a time react js”