Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

Hi everyone,

I gave a go to create a piano with HTML,CSS and js and I’ve wasted hours trying to figure out why my code (in /localhost:8000/) wasn’t working and finally using a different browser than chrome…all sorted, piano is playing using the keyboard as I want! :rage:

following my code:

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  if (!audio) return;
  audio.pause();
  audio.currentTime = 0.5;
  audio.play();
}
document.addEventListener("keydown", playSound);

on Chrome the error displayed in the console is : “Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().” After reading here and there I still struggling to understand how to sort it in chrome. Anyone willing to help me out?

thanks!!

Hi @daniele_90, this error message makes me think that it may be a similar – not the same – issue I had with Chrome (and did not solve).
I wanted to integrate sound effects on scroll and also got an uncaught promise error message by Chrome. After spending time googling the error, I found out that Chrome demands a click action (probably also keydown might work) by the visitor to play sound in order to avoid annoying the visitor with unwanted sound.
Maybe the fact that the keydown triggers the pause first and makes the play() a follow-up action is a problem, too. I don’t know if that is a solution, but if you have the possibility to rebuild your function in a way that play is a directly triggered action, it might be worth giving it a try.

1 Like

This looks like it could be a race between pause and play, due play and (probably pause as well) being asynchronous.

Try looking at this stackoverflow question for some answers that might suit you!

Not a click action to play a sound, but rather an interaction with the webpage (just once). This actually is integrated in a lot of other browsers like firefox, and is also present in some other JavaScript APIs (like the WebAudio API).

This can be manually overridden by whitelisting that website to either allow or not allow sounds.

1 Like

Thanks for your help guys, I’ve forgotten to came back here and reply to you :sweat_smile: sorry…I’ve read a bit more about promises, asynch, await etc part of JS that I’ve missed during the tutorial and I still struggle to understand…not sure how to figure that out still but I’ll definitely keep in mind your tips once I’ll work to that projet again, which for now I’ve kept it on the side! Thanks again

1 Like