I am creating a sound board with a mapped array.
I have a onClick Handler which changes the colour of the button that is active/playing and Play/Pauses.
Currently I can pause the ‘active’ button but cannot restart the track for that button.
I can stop playing that track if I press on a different button to play that buttons track.
Just looking for some help on how to Play the same button after I paused it.
Thanks 🙂
const handleClick = (beat: string, index: number ) => {
if (activeIndex === isActive) {
setIsActive(!isActive);
activeSound.play();
}
if (activeSound) {
activeSound.stop();
}
if (!activeSound && activeIndex === isActive) {
const newSound = createSound(beat);
newSound.play();
setActiveSound(newSound);
}
if (activeIndex !== index) {
const newSound = createSound(beat);
newSound.play();
setActiveSound(newSound);
}
setActiveIndex(index);
}
return (
<Container>
<Title> Melody </Title>
<Grid>
{
melodyData.map((beat, index: number) => {
return <Button key={index} $isActive={activeIndex === index} onClick={() => handleClick(beat.src, index)}>{beat.title}</Button>
})
}
</Grid>
</Container>
)
};