允许在 Safari 上聊天应用程序使用 audio.play()

由于苹果禁用了自动播放音频的功能HTMLMedia​Element​.play() https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play在没有用户交互的 javascript 中，我不确定当用户在页面加载后与 DOM 交互之前收到聊天消息时应该如何播放声音。

socket.on("receive message", data => {
  const receiveSound = new Audio("1.mp3");
  messages.push(data);
  receiveSound.play();
});

我尝试在mousemove事件。我也试图伪造一个click()通过 React ref 上的元素来初始激活它。这两种解决方案都不起作用。

有没有办法在有消息传入时自动播放音频元素？这一定是可能的，因为 YouTube 可以自动播放视频而无需交互。

每次我尝试播放音频时，都会收到此错误：

Unhandled Rejection (NotAllowedError): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

有一种方法可以让 Safari 播放声音，而不必在站点设置中允许它。

根据webkit 文档 https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/，它明确表明用户需要交互才能播放音频/视频，在本例中是通过单击，但他并没有说在您播放一些音频后，他会让您播放任何其他音频，然后没有任何问题。考虑到这一点，您可以在您的计算机上运行一些脚本index.html它将在没有任何音量的情况下播放通知音频，然后您可以毫无问题地再次运行它，如下例所示：

function unlockAudio() {
    const sound = new Audio('path/to/your/sound/notification.mp3');

    sound.play();
    sound.pause();
    sound.currentTime = 0;

    document.body.removeEventListener('click', unlockAudio)
    document.body.removeEventListener('touchstart', unlockAudio)
}

document.body.addEventListener('click', unlockAudio);
document.body.addEventListener('touchstart', unlockAudio);

要在此解决方法之后运行您的代码，只需按以下方式操作：

function soundNotification() {
    const sound = new Audio('path/to/your/sound/notification.mp3');

    const promise = sound.play();

    if (promise !== undefined) {
        promise.then(() => {}).catch(error => console.error);
    }
}

请记住，上面的示例只是向您展示一种替代方案，有多种方法可以解决此问题，只需记住您需要先播放一些声音...