score:2

Accepted answer
import React from "react";
import { useState, useEffect } from "react";

const Home = () => {
  let [songs, setSongs] = useState([]);

  useEffect(() => {
    setSongs([
      {
        id: 1,
        title: "Song 1",
        genre: "Instrumental",
      },
      {
        id: 2,
        title: "Song 2",
        genre: "Western",
      },
    ]);
  }, []);

  const playSong = (id) => {
    console.log(id);
    const x = document.getElementById(id);
    console.log(`x`, x);
    x.play();
  };

  return (
    <>
      {songs.map(({ id, title, genre }) => (
        <div className="music-controller" key={id}>
          <h2>{title}</h2>
          <p>
            <small>{genre}</small>
          </p>
          <div className="controls">
            <button onClick={() => playSong(id)}>Play</button>
            <audio id={id}>
              <source src={`http://localhost:8000/api/songs/audio/${id}`} />
            </audio>
          </div>
        </div>
      ))}
    </>
  );
};

export default Home;

Related Query

More Query from same tag