javascript - 无法在 React.js 中设置蜂鸣声

Question

我想在我的 React.js 应用程序中设置蜂鸣声。我关注this article ，但是点击按钮却没有声音。

import UIfx from "uifx";

class App extends Component {
  render() {
    const mp3file = `${process.env.PUBLIC_URL}/assets/sound/alert.mp3`;
    const sound = new UIfx({ asset: mp3file });
    sound.setVolume(0.8);
    console.log("sound", sound);
    return() {
        <button onClick={sound.play}>Signup</button>
    }
  }
}

声音显示如下:

UIfx {file: {…}, volume: 0.8, throttleMs: 0, play: ƒ, setVolume: ƒ, …}
play: ƒ (volume)
setVolume: ƒ (volume)
file: {asset: "/assets/sound/alert.mp3"}
volume: 0.8
throttleMs: 0
validateVolume: ƒ validateVolume(volume)
__proto__: Object

我有一个错误如下:

Uncaught Error: "Volume" must be an number between 0.0 and 1.0

Answer 1

您的代码有两个问题。

第一个是 UIFx 构造函数不接受您的对象，您应该改为 new UIFx(mp3file) 。

第二个是 onClick={sound.play} - this 将被设置为元素引用并会导致问题，您应该做的是 onClick={() => sound.play()} 相反。