Уведомить пользователя со звуком, если в БД добавлены новые данные

Question

У меня есть небольшая проблема, которую я не могу понять

Проблема в том, что я хочу воспроизводить аудио, если в db есть недавно вставленные данные, я использую jQuery с setInterval, это мой код ниже

var i = 0;
setInterval(function() {
var data; 
$.getJSON("chat.php", function(res) {
data = res.data;
var chat_box = $("ul#chat_box");
chat_box.empty();

if(data.length > i) {
Audio audio = new Audio('assets/notify.mp3');
audio.play();
i = data.length
}

$.each(data,function(key,value) {

        var user = $("<span/>").html(value.username);
        var message = $("<span/>").html(value.message);
        chat_box.append($("<li/>").append(user, ' : ', message));

  });

  chat_box.animate({"scrollTop":  chat_box[0].scrollHeight}, "slow");


  });
  },3000);

Мой код не работает, и он также воспроизводит звук каждые 3 секунды, я думаю, из-за setInterval, у меня много исследований на этом сайте, но никто не работает, поэтому я решил спросить.

Спасибо

Answer 1

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

Answer 2

После запуска этого фрагмента (и до нажатия кнопки), и если вы проверите консоль (консоль Chrome, а не StackOverflow), вы увидите следующее сообщение об ошибке:

DOMException: play () завершилась неудачно, потому что пользователь не взаимодействовал с документом первым.

После нажатия кнопки воспроизводится звук, и он будет продолжаться до тех пор, пока dummyData более чем i.

let i = 0;
let dummyData = 0;

function play() {
  let audio = new Audio("https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3");
  audio.play();
}

setInterval(() => {
  console.log(dummyData, i);
  if (dummyData > i) {
    play();
    i = dummyData + 10;
  };
  dummyData++;
}, 3000);

<button onclick="play()">Play Audio</button>