为什么这个 try catch 语句不起作用？

Question

我正在制作网页。

在一个函数中，我播放了一个音频项目。但是，如果用户没有与页面交互，Chrome 会阻止此操作，所以它给了我通常的错误消息 play() failed because the user didn't interact with the document first。作为回应，我想捕捉错误信息：

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>

不知何故 Chrome 仍然显示我不明白的错误信息。有人可以向我解释这怎么可能吗？

Answer 1

.play方法returns一个Promise，所以你可以await它来捕获错误。

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>

为什么这个 try catch 语句不起作用？

Why does this try catch statement not work?

html

javascript

google-chrome

autoplay