如何禁止浏览器/系统媒体控件控制网页背景音乐？

要让游戏背景音乐不显示在Chrome浏览器和macOS系统的媒体控件中，有两种可靠方案：

方案一：使用disableRemotePlayback属性（最简单） #

直接给<audio>标签添加disableRemotePlayback属性，就能阻止系统级媒体控件识别这个音频元素：

<audio class="music" src="..." loop disableRemotePlayback></audio>

这个属性在Chrome、Safari（包括macOS原生控件）中都能生效，无需额外JS代码，适合快速解决问题。

方案二：用Web Audio API播放（更彻底） #

如果需要完全脱离HTML媒体元素的系统集成，使用Web Audio API加载并播放音频，系统媒体控件不会追踪到这类音频。示例代码如下：

let audioContext;
let audioBuffer;

// 预加载音频文件
async function loadBgMusic() {
  audioContext = new AudioContext();
  const res = await fetch('你的音频文件地址');
  const arrayBuf = await res.arrayBuffer();
  audioBuffer = await audioContext.decodeAudioData(arrayBuf);
}

// 循环播放音频
function playLoop() {
  const sourceNode = audioContext.createBufferSource();
  sourceNode.buffer = audioBuffer;
  sourceNode.connect(audioContext.destination);
  sourceNode.loop = true;
  sourceNode.start();
}

// 绑定到用户交互事件（比如页面点击）
document.addEventListener('click', () => {
  if (!audioContext) {
    loadBgMusic().then(playLoop);
  } else {
    playLoop();
  }
}, { once: true });

这种方式完全绕过了HTML <audio>元素的媒体集成，系统控件不会检测到该音频的播放状态。

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