从谷歌网盘链接打开网页时如何实现音频自动播放？

• 浏览器自动播放策略限制：当前所有主流浏览器都默认禁止无用户交互的非静音音频自动播放，只有当用户和页面产生过点击、触摸、键盘输入等有效交互后，自动播放才会生效。你遇到的有时能播有时不能的情况，大概率是能播放的场景下你提前和页面产生了交互，无交互时就会被浏览器拦截。
• 谷歌网盘资源加载不稳定：谷歌网盘的公开直链存在访问频次限制、权限校验波动、重定向延迟等问题，偶尔会出现资源加载超时、403报错的情况，也会导致音频加载失败无法自动播放。

• 兼容浏览器自动播放策略：不要完全依赖原生autoplay属性，改为监听页面首次用户交互后主动触发播放，代码示例如下：

<audio id="my_audio">
  <source id="my_audio_source" src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL">
</audio>
<script>
const audio = document.getElementById('my_audio')
// 监听首次用户交互后播放
const triggerPlay = () => {
  audio.play().catch(err => console.log('播放失败', err))
  // 执行后移除监听避免重复触发
  document.removeEventListener('click', triggerPlay)
  document.removeEventListener('touchstart', triggerPlay)
}
document.addEventListener('click', triggerPlay)
document.addEventListener('touchstart', triggerPlay)

// 如果你的业务场景允许静音自动播放，直接给audio标签添加muted属性即可，原生autoplay可以正常生效，后续可引导用户手动开启声音：
// <audio id="my_audio" autoplay muted>
</script>

• 优化资源加载稳定性：给audio标签添加preload="auto"属性，让页面提前加载音频资源，降低加载失败概率：

<audio id="my_audio" preload="auto">
  <source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL">
</audio>

如果有条件更换存储源，建议把音频资源转存到专门的静态资源存储服务，彻底避免谷歌网盘的访问限制。

• 增加重试逻辑：可以监听audio的error事件，加载失败时自动重试2-3次，避免单次网络波动导致播放失败。

内容的提问来源于stack exchange，提问作者Code cracker