javascript - 当组件安装在 React 上时，如何播放音频？

Question

我有一个简单的通知组件，如下所示：

export const Notification = (props) => {
  return (
    blah blah
  );
}

当来自服务器的推送通知发生时，它会被渲染。渲染通知组件时如何播放通知声音？

我发现了很多关于如何使用 HTMLAudioElement 创建新的 Audio(src) 并在单击按钮或触发其他事件时以编程方式播放音频的文章。但不是关于在 React 上安装组件时如何触发音频。有人会认为这已经在互联网上讨论过，或者也许我看过一些东西？谢谢。

标签： javascriptreactjs

Answer 1

正如@evolutionxbox 提到useEffect的那样，可能是要走的路。它看起来像这样。

const {useEffect} = React;

import wavFile from './path/to/file';

function Notification() {

  useEffect(() => {
    const audio = new Audio(wavFile);
    audio.play()
  }, []);

  return <div />

};