Javascript 如何播放mp3一次点击反应？

我有一个想法，我想在我的react应用程序的公用文件夹中播放一个非常小的mp3，有很多不同的音频播放解决方案，但没有一个简单的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>
    );
  }
}

类应用程序扩展组件{
render（）{
var audio=新音频（“../public/sound.mp3”）
返回(
);
}
}

---

（单击图像时播放声音）

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

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

audio.play（）}/>

---

通过作为onClick处理程序传递

audio.play

，而不是

audio.play（）

，您传递的是

play

函数本身

audio.play（）

将调用该函数-如果出于某种原因它也返回了一个函数，那么该函数将在单击时被调用。

因此，我将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;

类应用程序扩展组件{
render（）{
返回(
audio.play（）}/>
按我
);
}
}
导出默认应用程序；

添加到渲染方法

在脚本

document.getElementById（'audio'）.play（）中

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

从“React”导入React；
函数App（）{
让音频=新音频（“/christmas.mp3”）
常量开始=（）=>{
音频播放
}
返回(

玩
);
}
导出默认应用程序；

您可以使用import语句导入音频，创建音频对象，并使用实例化的对象调用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;

从“React”导入React；
从“/../assets/audios/success.mp3”导入音频；
类AudioTest扩展了React.Component{
播放音频=（）=>{
新音频（Audio.play（）；
}
render（）{
返回(
播放音频
);
}
}
导出默认听力测试；

最好给出一些解释。控制台读取无法对“HTMLMEDIALEMENT”执行“播放”：非法invocation@Jimenemex…？这似乎是正确的，但仍然没有执行sound@ChristopherDucote确保您有正确的文件路径它是由visual studio代码自动生成的我没有键入路径。。。hmmmm@ChristopherDucote查看控制台，如果文件有错误？

您提供的错误不包含堆栈跟踪。在B处（index.js:1588）在G处（index.js:1905）在index.js:1920处在index.js:1939处在index.js:1420处在未捕获（在承诺中）类型错误：未能在“HTMLMediaElement”上执行“play”：在htmlunknowneElement.callback处非法调用（react dom.development.js:147）在

中，您可能希望将

音频

包装在

usemo

中，或者将其移动到组件外部，以防止组件重新渲染时出现问题，因为AM I缺少某些内容，或者此答案中没有挂钩？

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;