在 Safari 上允许 audio.play() 用于聊天应用答案

【问题标题】：Allow audio.play() on safari for chat app在 Safari 上允许 audio.play() 用于聊天应用
【发布时间】：2019-05-31 12:53:18
【问题描述】：

由于 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.

【问题讨论】：

标签： javascript ios macos safari html5-audio

【解决方案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);
    }
}

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

【讨论】：

非常有帮助。谢谢。