Как включить аудио-звуковые эффекты в чате или бот-чате? - PullRequest
Новая
       8

Как включить аудио-звуковые эффекты в чате или бот-чате?

0 голосов
/ 04 июля 2018

Доброе утро ..

После того, как Google Chrome обновил свою политику автозапуска в апреле 2018 года, чтобы предотвратить воспроизведение аудио и видео без взаимодействия с пользователем, Как я могу запустить звуковой эффект, чтобы уведомлять пользователя о новых сообщениях?

Я не хочу автоматически воспроизводить звук, все, что я хочу, это воспроизводить звуковые эффекты каждый раз, когда пользователь получает новое сообщение с другой строки.

Вот мой фрагмент кода, как просто то, что мне нужно для достижения: 

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

1 Ответ

0 голосов
/ 09 июля 2018

Позволяет отключить звук аудиоэлемента и сделать кнопку включения звука для пользователя: 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>
...