如何实现音频在Google Chrome 67+版本中自动播放？

首先得明确Chrome 67之后的自动播放核心规则：只有在用户和页面产生真实交互（比如点击、触摸、按键操作）之后，音频/视频才能自动播放——除非你的站点满足媒体参与度指数（MEI）极高，或是用户已添加到主屏幕的PWA应用，但这两种场景局限性都比较大，最通用稳妥的方案还是依托用户交互来触发播放。

下面是几种可行的实现方式：

1. 绑定用户交互事件触发播放 #

这是兼容性最好、最不会踩坑的方法。你可以在页面加载完成后，监听用户的首次点击、触摸等操作，在事件回调里初始化并启动音频播放。

示例代码：

document.addEventListener('DOMContentLoaded', () => {
  const audio = new Audio('your-audio-file.mp3');
  
  // 定义播放触发函数
  const triggerAudioPlay = () => {
    audio.play().catch(err => {
      console.log('播放启动失败:', err);
    });
    // 只需要触发一次，所以移除监听
    document.removeEventListener('click', triggerAudioPlay);
    document.removeEventListener('touchstart', triggerAudioPlay);
  };

  // 监听多种用户交互事件
  document.addEventListener('click', triggerAudioPlay);
  document.addEventListener('touchstart', triggerAudioPlay);
});

这个逻辑的核心是：用户只要点击页面任意区域（或在移动端触摸屏幕），就会触发音频播放；后续如果需要循环播放或再次自动播放，也能基于这次交互的上下文顺利执行。

2. 利用会话内的交互上下文（仅限特定场景） #

如果用户是通过点击站内链接跳转至当前页面的，Chrome会判定这个会话带有用户交互上下文，这种情况下音频有可能直接自动播放。不过这个场景完全依赖用户的跳转路径，稳定性远不如第一种方案，只能作为补充场景尝试。

3. 提升媒体参与度指数（MEI） #

Chrome会根据用户过去与你站点的互动情况（比如频繁播放媒体、停留时长久）计算MEI评分，评分高的站点会被允许自动播放音频。但这个是浏览器自动判定的，你无法主动控制，只能通过优化用户体验让更多用户的MEI达标。

额外注意事项 #

• 不要尝试模拟用户点击来绕过规则，这种行为会被浏览器识别并拦截，还违反规范。
• 建议在音频播放失败时给出友好提示，比如显示一个手动播放按钮，避免用户体验断层。

内容的提问来源于stack exchange，提问作者Akshay Rathod