如何在onClick反应中播放mp3？

Question

我有一个我想播放一个非常小的 mp3，一旦它在我的 React 应用程序的公共文件夹中，播放音频有很多不同的解决方案，但没有一个是简单的反应，我尝试了 react-360，但有一个模块之一的问题。

我试过一些反应音频库，但它们似乎是用于音频播放器的，我不需要播放按钮、暂停和音量等等。只想简单的音效

class App extends Component {
  render() {

    var audio = new Audio("../public/sound.mp3")

    return (
      <Container>
            <img src={dwight} onClick={ audio.play() }/>
      </Container>
    );
  }
}

（点击图片时播放声音）

Answer 1

钩子版本（React 16.8+）：

最小版本。

将您的音乐文件 (mp3) 放在公共文件夹中。

import React from 'react';

function App() {
  let audio = new Audio("/christmas.mp3")

  const start = () => {
    audio.play()
  }

  return (
    < div >
      <button onClick={start}>Play</button>
    </div >
  );
}

export default App;

Answer 2

您可以使用 import 语句导入音频并创建一个 Audio 对象并使用实例化的对象调用 play() 方法。

import React from "react";
import audio from './../assets/audios/success.mp3';

class AudioTest extends React.Component{

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

  render() {
    return (
        <div>
          <button onClick={this.playAudio}>PLAY AUDIO</button>
        </div>
    );
  }
}

export default AudioTest;

Answer 3

您需要传递一个触发播放的函数：

<Container>
    <img src={dwight} onClick={ () => audio.play() }/>
 </Container>