MVC5应用中document ready事件触发音频播放报错的解决方法

在MVC5应用中实现音频播放功能时遇到异常：上述代码通过按钮点击事件触发音频播放可正常运行，但将音频播放逻辑绑定到document ready事件执行时会抛出错误。

这不是MVC5框架的问题，是现代浏览器通用的自动播放拦截策略导致的：

• 浏览器默认禁止页面在无用户主动交互的上下文中调用媒体播放方法，document ready触发时用户还没做任何点击、按键类操作，属于非交互上下文，直接调用音频play()会被直接拦截抛出DOM异常。
• 按钮点击属于用户主动发起的交互行为，在这类事件回调里调用播放方法符合浏览器放行规则，所以能正常运行。

根据你的业务需求选对应方案即可：

• 方案1：保留用户触发入口（最推荐，体验最好）
  取消document ready阶段的自动播放逻辑，保留播放按钮让用户主动点击触发，这个方案没有任何兼容性问题，也不会被浏览器策略拦截，是绝大多数场景下的最优选择。
• 方案2：静音自动播放（适配必须加载即播放的场景）
  浏览器允许静音状态的音视频在页面加载时自动播放，你可以先把音频设为静音，等用户第一次和页面交互时再打开声音，参考代码：

  $(function() {
      const audioEl = $("#yourAudioSelecter")[0];
      // 初始化时设为静音
      audioEl.muted = true;
      // 此时播放不会被拦截
      audioEl.play();
      // 监听用户首次点击页面后取消静音
      $(document).one("click", function() {
          audioEl.muted = false;
      });
  });
  

• 方案3：异常降级处理
  如果你一定要在页面加载时尝试播放，记得捕获play方法返回的Promise异常，被拦截时显示播放提示引导用户手动触发，避免脚本报错阻塞其他逻辑：

  $(function() {
      const audioEl = $("#yourAudioSelecter")[0];
      audioEl.play().catch(() => {
          // 被拦截时显示手动播放按钮
          $("#playTip").show();
      });
  });
  

不要尝试找漏洞绕过浏览器自动播放策略，这类限制是浏览器内核层面强制管控的，所有取巧的绕过方法都会随着浏览器版本更新失效，按照官方策略适配才是长期稳定的做法。

内容的提问来源于stack exchange，提问作者Ahsan Ali Siddiqi