I just started with the learning of React.js and I’m trying to figure things out. I’m creating a simple meditation app where each button has a sound linked to it. I created 4 buttons (for each sound available) and when clicking on it, the sound plays. But obviously when clicking on other buttons the previous sound keeps playing in background. I have installed react-player to have more control over it and I tried to approach to a solution with useState.

Here’s the code:

import PropTypes from "prop-types";
import { useState } from "react";
import ReactPlayer from "react-player";

function Buttons({ soundsColor }) {
  const [alternativeText, setAlternativeText] = useState(null);
  const [playing, setPlaying] = useState(true);

  function playSound(soundUrl) {
    if (!playing) {
      soundUrl.play();
    } else {
      setPlaying(!playing);
    }

    console.log("Playing sound:", soundUrl);
  }

  function handleText(id) {
    setAlternativeText(id);
  }

  return (
    <>
      {/* Destructuring per rilevare le properties dall'oggetto */}
      {soundsColor.map(({ name, color, description, sound, id }, index) => (
        <button
          id={`btn-${index}`}
          className="p-20 relative rounded-[10px] active:scale-[0.98] transition-all 150ms ease-in "
          style={{ backgroundColor: color }}
          key={id}
          onClick={() => {
            playSound(sound);
            handleText(id);
          }}
        >
          <ReactPlayer
            url={sound}
            playing={playing}
            width="100%"
            height="100%"
          />
          <div className="absolute top-20 w-3/4 left-3 text-left">
            <p className="text-[#000] font-bold font-sourceSans">{name}</p>
            <small className="font-sourceSans text-secondSubtext font-light ">
              {alternativeText === id ? "Playing..." : description}
            </small>
          </div>
        </button>
      ))}
    </>
  );
}

Buttons.propTypes = {
  soundsColor: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number,
      name: PropTypes.string,
      description: PropTypes.string,
      color: PropTypes.string,
      sound: PropTypes.object,
    })
  ),
};

export function SoundScapes() {
  const soundsColor = [
    {
      id: 0,
      name: "Suikinkutsu",
      color: "#daff6f",
      description: "Water Drip Resonance",
      sound: new Audio("assets/Suikinkutsu.mp3"),
    },
    {
      id: 1,
      name: "Cicadas",
      color: "#A8AEEF",
      description: "Insect Chorus",
      sound: new Audio("./assets/Cicadas.mp3"),
    },
    {
      id: 2,
      name: "Temple Bells",
      color: "#A8AEEF",
      description: "Waterfall Roar",
      sound: new Audio("./assets/TempleBellSound.mp3"),
    },
    {
      id: 3,
      name: "Shomyo Falls",
      color: "#daff6f",
      description: "Bell Resonance",
      sound: new Audio("./assets/Waterfall.mp3"),
    },
  ];

  return (
    <div className="grid grid-cols-2 grid-rows-2 gap-3 p-6 mt-8">
      <Buttons soundsColor={soundsColor} />
    </div>
  );
}

I was thinking to create a :

const [playing,setPlaying] = useState(true) but I think I have to “attach” it to the playSound() function, which makes the sound play when clicking the button, and add a code that change the state when another button is pressed, but it’s where I’m stuck.

I would appreciate your help in understanding this, and if my approach is wrong. Thank you so much