Question

由于Apple禁用了在没有用户交互的情况下通过javascript通过HTMLMediaElement.play()自动播放音频的功能，因此我不确定在页面加载后用户与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 promisse = sound.play();

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

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

允许在Safari上使用audio.play（）进行聊天

1 个答案: