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>
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.
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
In the snippet below you’ll see that your logic seems correct, are you sure the user is interacting with the document before calling