鼠标悬停触发音频片段播放失效，请求排查问题原因

嘿，我来帮你捋捋这个问题！控制台能打印日志，说明mouseover事件绑定完全没问题，问题肯定出在音频播放的环节上，下面是几个最常见的原因和解决办法：

• 浏览器自动播放政策拦了你的请求
  现在Chrome、Firefox这些主流浏览器都有严格的自动播放规则——默认不允许网页在没有用户主动交互（比如点击、触摸屏幕）的情况下播放音频/视频。mouseover（鼠标悬停）并不属于浏览器认可的“主动交互”行为，所以哪怕你调用了play()，浏览器也会直接阻止这个操作。
  解决思路是先让用户完成一次主动交互（比如点击页面任意位置），在这次交互里“激活”音频的播放权限：

  window.onload = function() { 
    var clip1 = document.getElementById("clip1"); 
    var projects = document.getElementById("projects"); 
  
    // 先通过用户点击激活音频权限
    document.body.addEventListener('click', function initAudio() {
      clip1.load();
      // 静音播放一下再暂停，让浏览器认可这个音频的交互权限
      clip1.muted = true;
      clip1.play().then(() => {
        clip1.pause();
        clip1.muted = false;
      });
      // 只需要初始化一次，用完就移除这个点击事件
      document.body.removeEventListener('click', initAudio);
    });
  
    function playClip1() { 
      // 加上catch捕获错误，方便排查
      clip1.play().catch(err => {
        console.log("播放失败原因：", err);
      }); 
      console.log("I should play clip1 now"); 
    } 
    projects.addEventListener("mouseover", playClip1); 
  }
  

• 音频文件路径不对，没加载成功
  虽然控制台没报错，但有可能clip1.wav的路径写错了，导致音频根本没加载。你可以在控制台输入clip1.src看看路径是否正确，或者检查clip1.readyState：如果值是0（HAVE_NOTHING）或1（HAVE_METADATA），说明音频还没准备好。给音频标签加上preload="auto"属性，让页面加载时预加载音频：

  <audio id="clip1" src="clip1.wav" preload="auto"></audio>
  

• 音频格式不兼容
  有些浏览器对WAV的某些编码支持不好，你可以换成MP3格式试试，或者给音频加多个格式的源，让浏览器自己选支持的：

  <audio id="clip1" preload="auto">
    <source src="clip1.mp3" type="audio/mpeg">
    <source src="clip1.wav" type="audio/wav">
  </audio>
  

• 没捕获播放失败的错误信息
  play()方法返回一个Promise，播放失败时会触发reject，你可以通过catch捕获具体错误，比如上面代码里的写法，控制台会输出像NotAllowedError（自动播放限制）、NotFoundError（文件找不到）这类具体原因，帮你快速定位问题。

内容的提问来源于stack exchange，提问作者Unknown User