Solution 1 :

After running this snippet (and before clicking the button), and if you check the console (Chrome’s console, not StackOverflow) you’ll see the following error message:

DOMException: play() failed because the user didn’t interact with the document first.

Once you click the button, then the sound plays and it will continue playing as long as the dummyData is more than 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>

Solution 2 :

Chrome doesn’t allow automatic audio play, so the user has to interact with the document first. You can try on other browsers such as IE if you want automatic audio play.

Problem :

I have little problem that i can’t figured out

The problem is I want to play audio if there is newly inserted data in db,
Im using a jQuery with setInterval,
this is my code below

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);

My code is not working, and it also playing sound every 3 seconds, I think because of setInterval, I have lot of research in this site but no one work, so i decide to ask.

Thank you

Comments

Comment posted by Jerson

i’ll try other browser and thats not work

Comment posted by Luís Ramalho

In the snippet below you’ll see that your logic seems correct, are you sure the user is interacting with the document before calling

By

Leave a Reply

Your email address will not be published. Required fields are marked *