视频自动播放带声音

余道各努力，千里自同风2026-04-03 12:47

在项目中遇到一个问题：

浏览器出于用户体验考虑，限制了视频自动播放声音，必须用户交互后才允许播放带声音的视频。

但我们的业务场景是需要在某些情况下由 JS 主动控制视频播放（带声音），这就和浏览器策略产生了冲突。

我们的解决方案是：

在用户首次点击页面时，通过 AudioContext 创建一个极短的静音音频 buffer 并播放，从而"解锁"浏览器的音频上下文权限。

一旦音频上下文被激活，后续就可以通过 JS 控制 video 正常播放声音。

最后再移除这个点击监听，避免影响页面其他逻辑。

复制代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video class="videoDom" src="./what.mp4" style="display: none"></video>
    <script>
      let audioUnlocked = false;
      const unlockAudio = () => {
        if (audioUnlocked) return;
        // 创建 Web Audio
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        const ctx = new AudioContext();
        // 创建一个极短的静音 Buffer（0.01 秒）
        const buffer = ctx.createBuffer(1, ctx.sampleRate * 0.01, ctx.sampleRate);
        const source = ctx.createBufferSource();
        source.buffer = buffer;
        // 连接输出
        source.connect(ctx.destination);
        // 播放并立即停止
        source.start(0);
        source.stop(0);
        audioUnlocked = true;
        console.log('🔓 音频通道已解锁！');
        // 不再监听
        window.removeEventListener('click', unlockAudio);

        // 这里模拟 到指定页面后，需要播放带声音的视频
        let videoDom = document.querySelector('.videoDom');
        videoDom.play();
      };
      window.addEventListener('click', unlockAudio);
    </script>
  </body>
</html>