Блог

Я делаю музыкальный плеер,

Здесь у меня есть функция array.map, которая отображает 5 аудиоплееров с использованием созданного мной массива.

  {MoodCardInfo.map((moodCard) => (
        <audio loop="true" className="audio" ref={moodCard.ref}>
          <source src={moodCard.sound} />
        </audio>
      ))}
 

Я также визуализирую 5 компонентов

  {MoodCardInfo.map((moodCard, index) => (
              <MoodCard
                key={index}
                name={moodCard.name   index}
                backgroundImage={moodCard.image}
                playAudio={() => {
                moodCard.ref.current.play();
                }}
              />
            ))}
 

Я хотел бы знать, как лучше всего создать состояние воспроизведения и воспроизведения для каждого звукового элемента, поскольку он был отрисован с помощью .map. Мне понадобится это состояние для некоторых условий, которые мне нужно использовать в компоненте MoodCard