如何用JavaScript实现网页加载时自动播放音频文件？

我希望网页加载完成时自动播放音频文件，尝试了以下简单代码但无法运行，想请教原因，我了解这可能是Google Chrome的默认行为导致的，谢谢。

<!DOCTYPE html>
<html>
<head>
  <title>My Audio</title>
</head>
<body>

<script type="text/javascript">
window.onload=function(){
  const audio = new Audio("wonderful.mp3");
  audio.play();
  }
</script>
</body>
</html>

原因解析 #

• Chrome自动播放策略限制：Chrome及其他现代浏览器出于用户体验考量，制定了严格的自动播放规则，核心目的是避免未经用户许可的媒体内容打扰用户。只有满足以下任一条件，自动播放才会被允许：

  • 用户已与页面产生交互（如点击、触摸、按键操作）
  • 该网站被用户手动设置为"允许自动播放"
  • 媒体内容处于静音状态
  • 网站的媒体互动指数（MEI）达标（用户此前频繁与该站媒体内容互动）

• 你的代码未满足允许条件：window.onload触发时，用户尚未和页面发生任何交互，此时调用audio.play()会被浏览器直接拦截，控制台通常会抛出DOMException: play() failed because the user didn't interact with the document first.这类错误。

可行调整方案 #

方案1：静音自动播放（需业务场景允许）

如果可以接受先静音播放，后续通过用户交互取消静音，可修改代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>My Audio</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
  const audio = new Audio("wonderful.mp3");
  audio.muted = true;
  audio.play().then(() => {
    // 用户点击页面后取消静音
    document.body.addEventListener('click', () => {
      audio.muted = false;
    });
  }).catch(err => {
    console.error("播放失败:", err);
  });
}
</script>
</body>
</html>

方案2：等待用户交互后播放

通过提供交互元素（如按钮），让用户主动触发播放：

<!DOCTYPE html>
<html>
<head>
  <title>My Audio</title>
</head>
<body>
<button id="playAudioBtn">播放音频</button>
<script type="text/javascript">
const audio = new Audio("wonderful.mp3");
document.getElementById('playAudioBtn').addEventListener('click', () => {
  audio.play().catch(err => {
    console.error("播放失败:", err);
  });
});
</script>
</body>
</html>

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