如何在无特定AudioContext引用时控制全局Web Audio音量？

一、捕获网站内创建的AudioContext #

由于源码丢失无法直接获取Howler.js创建的AudioContext，可通过以下两种方式捕获：

• 覆盖原生构造函数追踪：在浏览器开发者工具的Console面板执行以下代码，刷新页面后即可捕获所有新创建的AudioContext实例：

// 兼容不同浏览器前缀
const OriginalAudioContext = window.AudioContext || window.webkitAudioContext;
window.AudioContext = window.webkitAudioContext = function(...args) {
  const ctx = new OriginalAudioContext(...args);
  console.log('已捕获AudioContext实例:', ctx);
  // 将实例挂载到全局，方便后续调用
  window.globalAudioCtx = ctx;
  return ctx;
};

执行后刷新页面，控制台会输出捕获到的AudioContext，同时可通过window.globalAudioCtx直接访问该实例。

• 开发者工具内存面板查找：打开浏览器DevTools的Memory面板，选择"Take snapshot"，在搜索框输入AudioContext，即可找到页面中所有已创建的AudioContext实例。

二、全局控制Web Audio音量 #

捕获到AudioContext后，通过插入全局GainNode实现音量控制：

1. 创建全局增益节点并接管音频输出：

// 假设已通过上述方法获取到AudioContext实例：globalAudioCtx
const globalGainNode = globalAudioCtx.createGain();
// 保存原始输出节点
globalAudioCtx._originalDest = globalAudioCtx.destination;
// 将增益节点连接到原始输出
globalGainNode.connect(globalAudioCtx._originalDest);
// 替换AudioContext的destination为增益节点，让所有音频输出都经过这里
Object.defineProperty(globalAudioCtx, 'destination', {
  get: () => globalGainNode
});

2. 控制全局音量：

// 静音（隐藏标签页时调用）
globalGainNode.gain.value = 0;
// 恢复音量（显示标签页时调用）
globalGainNode.gain.value = 1;

3. 自动监听标签页可见性：
   结合visibilitychange事件实现自动静音/恢复：

document.addEventListener('visibilitychange', () => {
  globalGainNode.gain.value = document.hidden ? 0 : 1;
});

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