在 React 中触发音频元素

Question

我正在制作鼓机，到目前为止，我已经能够生成包含所有声音的网格（它们现在都相同，但我稍后会更改它），但我无法实现我的playAudio function。 我记录了我的道具，看到信息正在传递，但是我的 function 工作得不是很好。 这是代码：

应用组件

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>;
}

鼓网

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;

声音

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;

Answer 1

您需要像这样创建一个新的Audio实例：

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

这是一个工作沙箱： https://codesandbox.io/s/happy-golick-7e6nm