javascript - 允许 audio.play() 在 safari 上用于聊天应用程序

Question

由于 Apple 通过 HTMLMedia​Element​.play()
禁用了自动播放音频的功能在没有用户交互的 javascript 中，我不确定当用户在页面加载后与 DOM 交互之前收到聊天消息时应该如何播放声音。

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

我尝试在 mousemove 事件中播放音频元素。我还尝试通过 React ref 上的元素伪造一个 click() 来初始激活它。两种解决方案均无效。

有没有办法在收到消息时自动播放音频元素？这一定是可能的，因为 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.

Answer 1

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

根据webkit documentation ，它明确表示用户需要交互才能播放音频/视频，在这种情况下是通过点击，但他并没有说在你播放一些音频之后他让你播放任何其他音频然后没有任何问题。考虑到这一点，例如，您可以在 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);
    }
}

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