如何在 onClick 反应中播放 mp3？答案

【问题标题】：How to play an mp3 once onClick in react?如何在 onClick 反应中播放 mp3？
【发布时间】：2019-01-09 16:11:52
【问题描述】：

我有一个我想在我的 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>
    );
  }
}

（点击图片时播放声音）

【问题讨论】：

标签： javascript reactjs audio

【解决方案1】：

Hooks 版本（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;

【讨论】：

您可能希望将audio 包裹在useMemo 中或将其移到组件外部以防止组件重新渲染时出现问题
我是遗漏了什么还是这个答案没有钩子？

【解决方案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;

【讨论】：

【解决方案3】：

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

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

【讨论】：

这似乎是正确的，但仍然没有执行声音
@ChristopherDucote 确保你有正确的文件路径
它是由 Visual Studio 代码自动生成的，我没有输入路径...嗯
@ChristopherDucote 查看控制台，文件是否有错误？
The error you provided does not contain a stack trace. at B (index.js:1588) at G (index.js:1905) at index.js:1920 at index.js:1939 at index.js:1420Uncaught (in promise) TypeError: Failed to execute 'play' on 'HTMLMediaElement': Illegal invocation at HTMLUnknownElement.callCallback (react-dom.development.js:147) at

【解决方案4】：

添加到您的渲染方法<audio id="audio"><source src="slow-spring-board.mp3" type="audio/mp3"></source></audio>
在脚本内部document.getElementById('audio').play()

【讨论】：

【解决方案5】：

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

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

【讨论】：

一些解释会很好。
控制台读取“HTMLMediaElement”上的“播放”失败：非法调用
@Jimenemex ...?

【解决方案6】：

所以我将 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;

【讨论】：

【解决方案7】：

import { Fragment } from 'react';
export default function PlaySound(props) {
    var savingCurrencySound = props.soundFile ?? 'https://example.com/audio/sound.mp3';
    var playCurrencySound = () => {     
        var audio = new Audio(savingCurrencySound);
        audio.play();
    }
    return (
        <Fragment>
            <img src={dwight} onClick={ () => playCurrencySound() }/>
        </Fragment>
    );
}

【讨论】：

此解决方案之前已提供，您能否在答案中添加更多详细信息，以便区分其他解决方案？否则它看起来像一个复制的答案。
@Cristik - 细微的差别是传递声音文件的相对 url 而不是音频文件的文件路径。
谢谢，你能扩展一下答案吗？这也将提高其质量，因为目前它是一个仅代码的答案，一个似乎是从另一个答案复制+粘贴的代码。
已经回复