CODEWITHSUNDEEP
javascriptreactjshtml5-audio
gabriel_tiso
gabriel_tiso

Reputation: 1137

Trigger an audio element in React

I'm making a drum machine, and so far I've been able to generate the grid with all the sounds(they're all the same for now, but I'll change it later), but I'm having trouble implementing my playAudio function. I logged my props and I saw that the information is being passed, but my function is not working very well. Here's the code:

App component

import React from "react";
import "./styles.css";

import sounds from "./Sounds";

import DrumsGrid from "./DrumsGrid";

export default function App() {
  const playAudio = audio => {
    audio.play();
  };

  const mapped = sounds.map(sound => (
    <DrumsGrid src={sound.src} id={sound.id} handleClick={playAudio} />
  ));

  return <div className="App">{mapped}</div>;
}

DrumsGrid

import React from "react";

import "./styles.css";

function DrumsGrid(props) {
  console.log(props);
  return (
    <div className="grid-element" onClick={() => props.handleClick(props.src)}>
      {props.id}
      <audio src={props.src} />
    </div>
  );
}

export default DrumsGrid;

Sounds 

const sounds = [
  {
    id: 1,
    src:
      "https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Kicks/24[kb]bonger-kick.wav.mp3"
  },

  {
    id: 2,
    src:
      "https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Kicks/24[kb]bonger-kick.wav.mp3"
  },

  {
    id: 3,
    src:
      "https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Kicks/24[kb]bonger-kick.wav.mp3"
  },

  {
    id: 4,
    src:
      "https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Kicks/24[kb]bonger-kick.wav.mp3"
  },

  {
    id: 5,
    src:
      "https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Kicks/24[kb]bonger-kick.wav.mp3"
  },

  {
    id: 6,
    src:
      "https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Kicks/24[kb]bonger-kick.wav.mp3"
  },

  {
    id: 7,
    src:
      "https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Kicks/24[kb]bonger-kick.wav.mp3"
  },

  {
    id: 8,
    src:
      "https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Kicks/24[kb]bonger-kick.wav.mp3"
  },

  {
    id: 9,
    src:
      "https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Kicks/24[kb]bonger-kick.wav.mp3"
  }
];

export default sounds;

Upvotes: 1

Views: 1496

Answers (1)

Bassem
Bassem

Reputation: 4050

You need to create a new Audio instance like this:

const playAudio = audio => {
    const audioToPlay = new Audio(audio);
    audioToPlay.play();
};

And here is a working sandbox: https://codesandbox.io/s/happy-golick-7e6nm

Upvotes: 1

Related Questions