hello guys , i have 6 music div , and i want to play another music , when clicked on play button .
but i have not any callback function to say " please stop musiccccc, then , play THIS index.
can you please look at my code?
`class Latests extends Component {
play = (image, music, index) => {
console.log(image, music, index);
this.setState({play: true, music: music, image: image , index: index});
};
constructor(props, context) {
super(props, context);
this.state = {
play: false,
image: "",
music: "",
index:0
};
}
render() {
const {play, index} = this.state;
const audioList = [
{
cover: t1,
musicSrc: musicSource,
name: "Canon (piano version)",
volume: 100,
networkState: 1,
readyState: 4,
played: {length: 1}
},
{
cover: t2,
musicSrc: musicSource,
name: "Canon (piano version)2",
volume: 100,
networkState: 1,
readyState: 4,
played: {length: 1}
},
{
cover: t3,
musicSrc: musicSource,
name: "Canon (piano version)3",
volume: 100,
networkState: 1,
readyState: 4,
played: {length: 1}
},
{
cover: t4,
musicSrc: musicSource,
name: "Canon (piano version)4",
volume: 100,
networkState: 1,
readyState: 4,
played: {length: 1}
},
{
cover: t5,
musicSrc: musicSource,
name: "Canon (piano version)5",
volume: 100,
networkState: 1,
readyState: 4,
played: {length: 1}
},
{
cover: t6,
musicSrc: musicSource,
name: "Canon (piano version)6",
volume: 100,
networkState: 1,
readyState: 4,
played: {length: 1}
}
];
return (
<div className="row align-content-center">
<div className='col-12 row justify-content-center d-flex'>
<div className={"col-3 m-1"}>
<LatestsCard index={0} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t1}/>
</div>
<div className={"col-3 m-1"}>
<LatestsCard index={1} music={musicSource2} playMusic={this.play} name={"WoW From OwO22"} image={t2}/>
</div>
<div className={"col-3 m-1"}>
<LatestsCard index={2} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t3}/>
</div>
<div className={"col-3 m-1"}>
<LatestsCard index={3} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t4}/>
</div>
<div className={"col-3 m-1"}>
<LatestsCard index={4} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t5}/>
</div>
<div className={"col-3 m-1"}>
<LatestsCard index={5} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t6}/>
</div>
</div>
{play &&
<ReactJkMusicPlayer
onAudioPlayTrackChange={(audioInfo) => console.log(audioInfo)}
seeked={true}
preload={true}
mode={"full"}
glassBg={true}
defaultPlayIndex={index}
defaultPosition={{bottom: 60, left: 0}}
audioLists={audioList}
/>
}
</div>
);
}