如何在react中播放一次mp3 onClick？

Question

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

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

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>