Как воспроизвести звук при определенном условии? - PullRequest
Новая
       13

Как воспроизвести звук при определенном условии?

1 голос
/ 01 октября 2019

Я делаю веб-сервер для вывода значений давления графика на веб-сайте. Если давление слишком низкое / высокое, я хочу воспроизвести звуковое предупреждение пользователя. Кажется, я не могу найти способ сделать это, поскольку у меня есть уникальная проблема: у меня должен быть <meta http-equiv="refresh" content="1" /> в моем HTML-коде. Это, конечно, обновляет страницу каждую секунду, поэтому даже если у меня есть кнопка, чтобы пользователь нажимал в первый раз, когда давление слишком низкое, страница мгновенно перезагружается, и я получаю «Uncaught (in обещание) DOMException» в консолив следующий раз звук должен воспроизводиться. Вот код, который у меня пока есть, сокращенный, чтобы показать необходимые части:

HTML: 

<audio id="alert_sound" controls>
  <source src="chime.mp3" type="audio/mp3">
  <source src="chime.ogg" type="audio/ogg">
</audio>

Javascript: 

var arduino = [2.11,2.07,2.06,08,1.82,2.00,2.13,1.85,2.15,1.73]
var sound = document.getElementById("alert_sound");
if (Math.min(...arduino) < 5) {
    const playPromise = sound.play();
    if (playPromise !== null) {
        playPromise.catch(() => { sound.play(); })
    };

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

1 Ответ

0 голосов
/ 01 октября 2019

Это из-за новой политики Chrome в отношении звука.

Как видно из приведенного ниже примера, звук действительно не начнет воспроизводиться, пока вы не нажмете на эту бессмысленную нажмите меня кнопку. Новая политика Audio Play в Google Chrome гласит, что пользователь должен сначала взаимодействовать с документом для воспроизведения аудио. Подробнее об этом здесь . 

var sound = document.getElementById("sound");

setInterval(() => sound.play(), 3000)
<audio id="sound" controls>
   <source src="https://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
</audio>    

<button>click me</button>
...