Question

我有一个我想在React应用程序的公用文件夹中播放一个非常小的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

您可以使用 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 2

挂钩版本（反应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 3

您需要传递触发播放的功能：

Index(['C', 'D'], dtype='object')

Answer 4

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

通过传递audio.play作为onClick处理程序，而不是audio.play()，您就传递了play函数本身。 audio.play()会调用该功能-如果由于某种原因它还返回了一个功能，则该功能将在点击时被调用。

Answer 5

所以我将src文件夹中的声音和图片文件移到资产中，然后将onClick函数更改为一个最终可以使用的组合，看起来像是双重调用起到了作用


class App extends Component {
  render() {
    return (
      <Container>
        <img src={dwight} alt="ds" onClick={() => audio.play()} />
        <h1> PRESS ME</h1>
      </Container>
    );
  }
}

export default App;

Answer 6

添加到渲染方法import React, {useState, Component, ImageBackground} from 'react';
在脚本<audio id="audio"><source src="slow-spring-board.mp3" type="audio/mp3"></source></audio>中

如何在onClick中播放mp3

6 个答案: