HTML/JS Audio元素如何禁用系统音频控制 避免被键盘/锁屏控件操作

该问题是现代浏览器默认将页面内<audio>元素注册到系统媒体控制链路导致的，无论是HTML声明的audio标签还是JS创建的Audio实例，默认都会触发该行为，表现为桌面端响应全局媒体按键、移动端锁屏显示音频控制组件。以下是可落地的解决方案：

方案1：调整音频元素属性（改动最小） #

给所有音频实例添加disableRemotePlayback属性，禁用远程播放和系统媒体链路绑定，适用于不需要复杂音频处理的场景：

• HTML标签写法：

<audio id='my-audio' src='你的音频资源地址' disableRemotePlayback></audio>

• JS创建写法：

const audio = new Audio('你的音频资源地址');
audio.disableRemotePlayback = true;

如需彻底拦截系统控制事件，可配合覆盖媒体会话默认行为：

if (navigator.mediaSession) {
  // 清空所有媒体控制事件的默认处理
  navigator.mediaSession.setActionHandler('play', () => {});
  navigator.mediaSession.setActionHandler('pause', () => {});
  navigator.mediaSession.setActionHandler('seekbackward', () => {});
  navigator.mediaSession.setActionHandler('seekforward', () => {});
  navigator.mediaSession.setActionHandler('previoustrack', () => {});
  navigator.mediaSession.setActionHandler('nexttrack', () => {});
  // 清空媒体元数据，避免锁屏显示音频信息
  navigator.mediaSession.metadata = null;
}

方案2：使用Web Audio API播放（最彻底） #

如果你的游戏有多音效、混音、实时音效处理需求，更推荐使用Web Audio API实现音频播放。该方案的音频流不会被浏览器注册到系统媒体控制链路，完全不会出现全局控制和锁屏组件的问题，简单示例代码如下：

// 音频上下文需要在用户交互事件（如点击、触摸）中初始化，避免被浏览器的自动播放策略拦截
let audioContext;
document.addEventListener('click', () => {
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
}, { once: true });

// 通用播放方法
async function playAudio(audioUrl) {
  if (!audioContext) return;
  // 拉取并解码音频文件
  const res = await fetch(audioUrl);
  const audioBuffer = await audioContext.decodeAudioData(await res.arrayBuffer());
  // 创建音源节点并播放
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start(0);
}

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