如何使用Web Audio API将new Audio()创建的单声道音频转为立体声

该方案完全兼容现有new Audio()的业务逻辑，无需修改原有音频创建、播放、控制的代码，仅需额外引入音频处理逻辑即可实现单/立体声切换、立体声声像调节。

核心实现代码 #

// 全局仅初始化1个AudioContext，避免资源占用过高
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// 存储已处理的音频实例，避免重复创建节点
const processedAudios = new WeakSet();

/**
 * 单/立体声转换处理
 * @param {HTMLAudioElement} audioEl 待处理的Audio实例
 * @param {number} pan 立体声声像值，范围-1（全左）~ 1（全右），默认0为居中
 * @param {boolean} forceMono 是否强制输出单声道，默认false
 */
function handleAudioChannel(audioEl, pan = 0, forceMono = false) {
  // 已处理过的实例直接修改参数即可
  if (processedAudios.has(audioEl)) {
    if (audioEl._pannerNode) {
      audioEl._pannerNode.pan.value = forceMono ? 0 : pan;
    }
    return;
  }

  // 绑定播放事件处理，兼容浏览器自动播放策略限制
  const onPlay = async () => {
    // 用户交互后激活AudioContext
    if (audioCtx.state === 'suspended') {
      await audioCtx.resume();
    }

    // 创建音频源节点，关联现有Audio实例
    const sourceNode = audioCtx.createMediaElementSource(audioEl);
    // 创建立体声调节节点
    const pannerNode = audioCtx.createStereoPanner();
    // 强制输出双声道立体声
    const mergerNode = audioCtx.createChannelMerger(2);

    // 设置声像参数
    pannerNode.pan.value = forceMono ? 0 : pan;

    // 节点链路连接：源节点 -> 声像调节 -> 声道合并 -> 输出到扬声器
    sourceNode.connect(pannerNode);
    pannerNode.connect(mergerNode);
    mergerNode.connect(audioCtx.destination);

    // 挂载节点到Audio实例，方便后续修改参数
    audioEl._pannerNode = pannerNode;
    audioEl._sourceNode = sourceNode;
    processedAudios.add(audioEl);

    // 移除单次事件绑定
    audioEl.removeEventListener('play', onPlay);
  };

  audioEl.addEventListener('play', onPlay);
}

/**
 * 批量处理所有音频实例
 * @param {number} pan 立体声声像值
 * @param {boolean} forceMono 是否强制单声道
 * @param {Array} customAudios 可选，传入动态创建未插入DOM的Audio实例数组
 */
function handleAllAudioChannel(pan = 0, forceMono = false, customAudios = []) {
  // 处理已插入DOM的audio元素
  document.querySelectorAll('audio').forEach(el => handleAudioChannel(el, pan, forceMono));
  // 处理自定义传入的动态创建的Audio实例
  customAudios.forEach(el => handleAudioChannel(el, pan, forceMono));
}

使用示例 #

你的原有业务代码无需做任何修改：

// 原有逻辑保持不变
var a1 = new Audio(`/1.mp3`);
a1.volume = .5;
a1.play()

// 仅需额外调用处理方法即可
// 转换为立体声，声像居中
handleAudioChannel(a1, 0);

// 如需切换回单声道
// handleAudioChannel(a1, 0, true);

// 如需调整声像偏左
// handleAudioChannel(a1, -0.5);

如需处理页面所有正在播放的音频：

// 若有动态创建未插入DOM的Audio实例，可统一放在数组中传入
const allMyAudios = [a1, a2, a3];
handleAllAudioChannel(0, false, allMyAudios);

注意事项 #

• 受浏览器自动播放策略限制，AudioContext必须在用户交互（点击、触摸等）后才能激活，建议将处理方法的调用绑定在页面的用户交互事件（如全局点击事件）中
• 原有Audio实例的play、pause、volume等所有原生API完全不受影响
• 兼容单声道、立体声源文件，可随时切换单/立体声模式

内容的提问来源于stack exchange，提问作者ZFC AKADEMİ