Why does this try catch statement not work?

user_15046005 0
Viewed 51

I am currently making a webpage.

In one function I play an audio item. However Chrome is blocking this if the user hasn't interacted with the page so it gave me the usual error message play() failed because the user didn't interact with the document first. In reaction to that I wanted to catch the error message:

audio = document.getElementById("audio");
try{
  audio.play();
} 
catch(error){
  //I am currently doing nothing
}
<audio id="audio" controls>
  <source src="https://dl.last.fm/static/1618838835/126178029/27849967d1ce2a81d9bf47d1e8a9eb69e11a012ae93b6113edddcfb91ab488c6/Death+Grips+-+Guillotine.mp3" type="audio/mp3">
</audio>

Somehow Chrome still shows the error message which I don't understand. Can someone explain to me how this is even possible?

autoplay google-chrome html javascript
1 Answers

The .play method returns a Promise, so you can await it to catch the error.

audio = document.getElementById("audio");
(async ()=>{
  try{
    await audio.play();
  } catch(e){
    //console.log(e);
  }
})();
<audio id="audio" controls>
  <source src="https://dl.last.fm/static/1618838835/126178029/27849967d1ce2a81d9bf47d1e8a9eb69e11a012ae93b6113edddcfb91ab488c6/Death+Grips+-+Guillotine.mp3" type="audio/mp3">
</audio>

user_95131840
Related