页面audio播放提示音?

Question

想在页面有提醒消息，目前做了个隐藏的audio，想通过js获取到然后play一下这样提示音就出来了。但是会出现这个报错，并不能通过这个方式。Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

Answer 1

MDN 媒体和 Web Audio API 的自动播放指南

Answer 2

用户没有操作的时候 网站是不可以自动播放带声音的视频除非媒体参与度够高

媒体参与度（MEI）衡量个人在网站上使用多媒体的倾向
它是一个数字 可通过chrome://media-engagement/查看
数值越高，用户对该站点的媒体参与度越高，就越有机会自动播放

第一种方法 播放失败 让用户进行交互后开始播放

try{
 await video.play()
}catch(){
 //说明媒体参与度指数阈值未超过  出现弹框按钮  点击按钮开始播放
}

第二种方法 先静音播放（静音的是可以自动播放的） 看声音是否正常出现的上下文的音轨上 如果不是正常出现 弹框按钮 让用户进行交互后点击开始取消静音

funtion play(){
  video.muted = true;
  video.play();
  const ctx = new AudioContext();
  const canAutoPlay = ctx.state === 'running';
  ctx.close();
  if(canAutoPlay){
    video.muted = flase;
  }else{
     //弹框展示按钮  点击按钮取消静音
  }
}