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

Posted 2023-02-25

【中文标题】当组件安装在 React 上时，如何播放音频？

【英文标题】：How can I play an audio when a component is mounted on React?

【发布时间】：2021-06-21 23:16:04

【问题描述】：

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

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

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

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

【问题讨论】：

使用useEffect 怎么样？

浏览器不允许您使用 javascript 播放任何媒体，除非用户至少与页面交互过一次。

【参考方案1】：

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

const useEffect = React;

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

function Notification() 

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

  return <div />

;

【讨论】：

非常感谢您的回答。是的，当然我之前尝试过效果。但是发生的事情是由于新的自动播放策略，Chrome 阻止了 play() 方法：***.com/questions/57504122/…。 developers.google.com/web/updates/2017/09/…