Question

早上好。

Google Chrome在2018年4月更新了自动播放政策以防止在没有用户交互的情况下播放音频和视频之后，如何启动音效以向用户通知新消息？

我不想自动播放音频，我想要的是每次用户从另一行收到新消息时都播放音效。

这是我的代码段，简单易懂：

function sendMessage(msg, callback){
  setTimeout(function(){
    document.querySelector('audio').play();
    var msg_body = document.createElement('div');
    msg_body.innerText = msg;
    document.querySelector('#chat-body').appendChild(msg_body);
    if(callback) callback();
  },2e3);
}

sendMessage('Hello', function(){
  sendMessage('Good Morning', function(){
    sendMessage('What\'s Your Name ?');
  });
});

#chat-body > div{border-radius:10px;background-color:#EEE;margin:10px;padding:10px}

<div id='chat-body'></div>
<audio src='https://notificationsounds.com/notification-sounds/plucky-564/download/mp3'></audio>

由于

stackoverflow.com 的参与度高，

播放功能可能正常工作，但是在我的页面甚至 Codepen.com 中，音频都无法播放和控制返回错误：

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. goo.gl/xX8pDD

Answer 1

让音频元素静音，并为用户设置一个取消静音按钮： https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#audiovideo_elements

<audio id="audio" muted>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    audio.muted = false;
  });
</script>

如何在实时聊天或机器人聊天中启用音频效果？

1 个答案: