页面audio播放提示音?

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

阅读 1.4k
avatarAI BotBETA

这个错误通常出现在尝试自动播放音频或视频时,特别是在没有用户与页面进行交互的情况下。许多现代浏览器为了提升用户体验和避免不必要的媒体噪音,实施了自动播放策略。这意味着在没有用户明确的交互行为(如点击、触摸等)之前,音频或视频可能不会自动播放。

为了解决这个问题,你可以尝试以下方法:

  1. 用户交互后再播放:在播放音频之前,确保用户已经与页面进行了某种形式的交互。例如,你可以在按钮点击事件的处理函数中播放音频。
  2. 使用playsinlinemuted属性:在<audio>标签中添加playsinlinemuted属性。playsinline用于在移动设备上内联播放音频,而muted属性表示音频默认是静音的。虽然这不会解决自动播放的问题,但它可以帮助改善用户体验。
  3. 检查浏览器策略:不同的浏览器可能有不同的自动播放策略。确保你了解并遵守目标浏览器的自动播放指南。
  4. 使用autoplay属性:尽管不推荐依赖autoplay属性,因为它可能受到浏览器策略的限制,但你可以尝试在<audio>标签中添加autoplay属性。然而,请注意,这可能不会在所有情况下都有效。
  5. 错误处理:使用Promise的错误处理回调来捕获并处理播放失败的情况。这样,即使音频无法自动播放,你的代码也不会因此而崩溃。

示例代码:

<audio id="myAudio" src="your_audio_file.mp3" preload="auto" muted></audio>

<button onclick="playAudio()">Play Audio</button>

<script>
  function playAudio() {
    var audio = document.getElementById('myAudio');
    audio.muted = false; // 取消静音
    audio.play().catch(function(error) {
      console.error('Failed to play audio:', error);
    });
  }
</script>

在这个示例中,音频文件默认是静音的,并且只有在用户点击按钮后才会取消静音并播放。同时,我们还添加了一个错误处理回调来捕获可能的播放错误。

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{
     //弹框展示按钮  点击按钮取消静音
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题