如何在 React 中为按钮添加音频答案

【问题标题】：How to add audio to button in React如何在 React 中为按钮添加音频
【发布时间】：2020-04-08 22:37:00
【问题描述】：

我正在使用 ReactJS 制作一个类似游戏的 webapp。

我有主菜单：播放、得分等...

如果用户点击播放，会有一个关卡列表，其中一些会打开，一些会关闭。

我想在单击按钮时播放音频/声音。如果关卡被锁定，则输出不同的声音。

现在，我需要能够进行不同的点击，并且 HTML 不会干扰按钮。

例如：

我想在“launchApple”等按钮上添加一个 onclick，并同时播放声音。声音应该有这个代码：

  if (audio.paused) {
            audio.play();
        } else {
            audio.currentTime = 0
        }

任何时候。

如果我们要创建另一个 audioButton 组件，按钮样式也需要共享。

音频按钮

 <React.Fragment onClick={playAudio}>
            {children}
        </React.Fragment>

对于按钮：

function Button({ children, onClick }) {


    return (
        <button onClick={onClick} className="Button">
            {children}
        </button>
    );
}

但是我们当然不能点击片段。我也想拥有可重用的音频，最好是这样我们就可以声明一次新的音频。

这是我的代码：https://github.com/AurelianSpodarec/touchtype-game/tree/master/src 这是正在建设的：https://touch-type.netlify.com/

我怎样才能基本上将音频添加到按钮和东西中，而不是将其实际包装在另一个“div”中，但又使其可与样式一起使用？

【问题讨论】：

标签： javascript reactjs game-development

【解决方案1】：

从事类似的工作。我们使用了audio-player-es6。
将其声明为依赖项，我们在项目中保存了一些音频文件，我们可以使用上述 npm 包播放这些文件。
试一试，告诉我进展如何。

参考：https://www.npmjs.com/package/audio-player-es6

【讨论】：