为何HTML <audio>元素在各浏览器中都无法触发自动播放？

数据老陈

2026-9-24

问题根因

代码语法错误：你写的Document.getElementsByClassName首字母D大写是错误的，正确应为小写document；且getElementsByClassName返回的是类数组的元素集合，不是单个DOM节点，直接调用.play()方法会直接报错。
浏览器自动播放策略限制：所有Chromium内核浏览器（包括Chrome、Edge）均禁止无用户交互的页面自动播放音频，这是强制安全策略，没有绕开的漏洞方案。

可用解决方案（可直接复用，适配紧急项目需求）

方案1（最稳妥，100%可用）：将音频播放绑定到用户触发结局的交互动作上

所有用户主动触发的点击、按键、触摸事件中调用音频播放，浏览器不会拦截，完全符合策略要求：

先修改HTML代码，移除无效的autoplay属性，增加id方便快速获取元素：

<audio id="ending-tune" src="../../../../../Audio/Stonebank - Life & Death.mp3" type="audio/mpeg"></audio>

在你触发结局展示的交互逻辑中插入播放代码即可，比如绑定到「查看结局」按钮的点击事件：

const endingAudio = document.getElementById('ending-tune');
// 假设showEnding是你展示结局内容的函数，由用户点击操作触发
function showEnding() {
  // 原有结局渲染逻辑
  // ...
  // 调用播放，加catch捕获异常方便排查问题
  endingAudio.play().catch(err => console.log('音频播放异常：', err));
}