页面加载时如何实现音频自动播放？已尝试两种方法均失效

这个坑我之前踩过好多次！现在主流浏览器对音频/视频自动播放的限制越来越严格了，核心原因就是防止未经用户许可的媒体播放骚扰到他们，所以你之前用autoplay属性或者在$(document).ready()里直接调用play()的方法失效是很正常的。

下面给你几个符合浏览器规则的可行方案：

• 绑定用户交互事件触发播放
  浏览器明确要求：自动播放必须由用户的主动交互（点击、触摸、键盘输入等）触发。你可以监听页面的第一次点击事件来初始化音频播放，这样既合规又能达到需求：

  // 监听页面首次点击，只执行一次
  document.addEventListener('click', function initAudio() {
    const audio = document.getElementById('audio');
    audio.play();
    audio.volume = 0.2;
    // 完成后移除监听，避免重复触发
    document.removeEventListener('click', initAudio);
  });
  

  如果你的页面本身有引导弹窗、确认按钮这类用户必须点击的元素，直接把播放逻辑绑定到这些元素的点击事件上会更自然。

• 用muted属性配合autoplay
  很多浏览器允许静音状态的音频自动播放，你可以先让音频静音自动加载播放，等用户有交互后再取消静音并设置音量：
  首先修改HTML：

  <audio id="audio" autoplay muted>
    <source src="audio/dark-tense-piano-drone.mp3" type="audio/mp3">
  </audio>
  

  然后添加用户交互后的静音取消逻辑：

  document.addEventListener('click', () => {
    const audio = document.getElementById('audio');
    audio.muted = false;
    audio.volume = 0.2;
  });
  

• 捕获自动播放错误，引导用户手动触发
  调用play()方法会返回一个Promise，你可以通过捕获这个Promise的拒绝状态，给用户明确的提示，引导他们触发播放：

  $(document).ready(function() {
    const audio = $("#audio").get(0);
    audio.play()
      .then(() => {
        // 自动播放成功，设置音量
        audio.volume = 0.2;
      })
      .catch(error => {
        console.log('自动播放被浏览器阻止，请点击页面任意位置开始播放');
        // 这里可以在页面上显示一个醒目的提示按钮，点击后触发播放
      });
  });
  

• 结合页面可见性API恢复播放
  如果你的页面可能在后台加载，之后用户切换到前台，且之前有过交互记录，可以用页面可见性API来恢复播放：

  let userHasInteracted = false;
  
  // 标记用户已完成首次交互
  document.addEventListener('click', () => {
    userHasInteracted = true;
  });
  
  // 监听页面可见性变化
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible' && userHasInteracted) {
      const audio = document.getElementById('audio');
      audio.play();
      audio.volume = 0.2;
    }
  });
  

需要注意的是，没有任何方法可以完全绕过浏览器的自动播放限制——这是浏览器为了用户体验设置的安全策略，所有可行方案都必须依赖用户的主动交互作为触发条件。

内容的提问来源于stack exchange，提问作者Elvinci Chen