Как автоматически воспроизводить звук после завершения таймера обратного отсчета? - PullRequest
Новая
       15

Как автоматически воспроизводить звук после завершения таймера обратного отсчета?

0 голосов
/ 03 апреля 2019

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

   var audio = new Audio('path to file.mp3');
   audio.play();

Но я получаю следующую ошибку Необработанное отклонение обещания: NotAllowedError: Запрос не разрешен агентом пользователя или платформой в текущем контексте, возможно, потому что пользователь отказал в разрешении.

Дело в том ... Google сам делает это, используя аудио-тег HTML5

Если вы введете countdown timer в поле поиска Google, оно должно показать вам виджет, который воспроизводит звук после окончания таймера обратного отсчета.

Вот как выглядит таймер Googles, если вы, ребята, не понимаете, о чем я говорю:)

google widget

1 Ответ

1 голос
/ 03 апреля 2019

Когда вы нажимаете эту кнопку «СТАРТ», они запрашивают жест пользователя и, таким образом, помечают свой документ как одобренный пользователем для воспроизведения звука.Это означает, что на них больше не распространяются политики автозапуска Chrome .

Теперь Safari по умолчанию здесь даже строже, чем Chrome, и простой щелчок по документу не работает: в этомбраузер, вам нужно начать воспроизведение с самого пользовательского события.

Так что в вашем случае это не сработает, даже если вы начали обратный отсчет с клика, как Google.

Решение состоит в том, чтобы затем начать воспроизведение с события щелчка и немедленно приостановить его.При этом ваш элемент будет помечен как одобренный пользователем, и вы получите полный контроль над ним. 

const audio = new Audio("https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3");
let time = 5;

btn.onclick = e => {
  // mark our audio element as approved by the user
  audio.play().then(() => { // pause directly
    audio.pause();
    audio.currentTime = 0;
  });
  countdown();
  btn.disabled = true;
};


function countdown() {
  pre.textContent = --time;
  if(time === 0) return onend();
  setTimeout(countdown, 1000);
}


function onend() {
  audio.play(); // now we're safe to play it
  time = 5;
  btn.disabled = false;
}
...