重新渲染组件时以及在初始渲染时播放音频-React.js

Question

我正在构建一个交互式应用程序，用户可以在其中选择相互“ ping”对方。

在每个所谓的“ ping”上，我都会发出通知声音，以使用户知道他有新消息。

我有一个名为BellNotifcation的组件：

import soundFile from "../../assets/sharp.mp3";

const BellNotification = ({
  askingUserDisplayNameArray,
  openInvitationModal
}) => {

  useEffect(() => {
    const audio = new Audio(soundFile);

    const audioPromise = audio.play();

    if (audioPromise !== undefined) {
      audioPromise
        .then(_ => {
          console.log("played");
        })
        .catch(err => {
          console.info(err);
        });
    }
  }, [askingUserDisplayNameArray]);

我目前在不同的浏览器上遇到两个问题：

1。在Firefox和chrome上，用户需要首先与浏览器进行交互（单击），如果没有，我将收到此错误：

The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission

在网络上搜索并尝试其他解决方案后，似乎没有任何效果。有没有针对这个问题的“黑客”？

2。在野生动物园中，无论用户是否与浏览器进行交互，我总是会收到上述错误消息（在每个“ ping”上）。