如何用原生JS或jQuery实现HTML音频元素的交叉淡入淡出切换？

你可以使用Web Audio API来实现无需额外Audio元素的交叉淡入淡出切换，它能精细控制音频增益（音量），并且无需在页面中预先维护多个Audio标签，资源管理更高效。

方案1：基于Web Audio API + 动态创建Audio元素 #

这个方案贴近你原有的使用习惯，通过动态创建Audio元素加载新曲目，借助Web Audio的GainNode实现音量渐变：

// 初始化Web Audio上下文（兼容不同浏览器前缀）
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let currentAudioSource;
let currentGainNode;
let fadeCleanupTimeout;

/**
 * 加载并播放音频，自动实现交叉淡入淡出
 * @param {string} url - 音频文件地址
 * @param {number} fadeDuration - 淡入淡出时长（毫秒），默认1000ms
 */
function switchToAudio(url, fadeDuration = 1000) {
  // 创建新的增益节点，控制新音频的音量
  const newGainNode = audioCtx.createGain();
  newGainNode.gain.value = 0;
  newGainNode.connect(audioCtx.destination);

  // 动态创建音频元素，预加载新曲目
  const newAudio = new Audio();
  newAudio.src = url;
  newAudio.preload = 'auto';

  // 新曲目加载完成后执行切换逻辑
  newAudio.addEventListener('canplaythrough', () => {
    // 创建新的音频源节点
    const newSource = audioCtx.createMediaElementSource(newAudio);
    newSource.connect(newGainNode);

    // 如果当前有正在播放的音频，执行淡出逻辑
    if (currentAudioSource) {
      // 线性降低当前音频音量到0
      currentGainNode.gain.linearRampToValueAtTime(
        0,
        audioCtx.currentTime + fadeDuration / 1000
      );
      // 淡出完成后清理旧资源
      fadeCleanupTimeout = setTimeout(() => {
        currentAudioSource.mediaElement.pause();
        currentAudioSource.mediaElement.src = ''; // 释放资源
        currentAudioSource.disconnect();
        currentGainNode.disconnect();
      }, fadeDuration);
    }

    // 线性提升新音频音量到1，同时播放
    newGainNode.gain.linearRampToValueAtTime(
      1,
      audioCtx.currentTime + fadeDuration / 1000
    );
    newAudio.play();

    // 更新当前音频资源的引用
    currentAudioSource = newSource;
    currentGainNode = newGainNode;
  });
}

方案2：纯Web Audio API（无需Audio元素） #

这个方案完全脱离HTML Audio元素，直接通过Web Audio API加载音频缓冲区，资源占用更低：

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let currentBufferSource;
let currentGainNode;

/**
 * 加载音频文件为AudioBuffer
 * @param {string} url - 音频文件地址
 * @returns {Promise<AudioBuffer>} 音频缓冲区对象
 */
async function loadAudioBuffer(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  return audioCtx.decodeAudioData(arrayBuffer);
}

/**
 * 播放音频并实现交叉淡入淡出
 * @param {string} url - 音频文件地址
 * @param {number} fadeDuration - 淡入淡出时长（毫秒），默认1000ms
 */
async function switchToAudio(url, fadeDuration = 1000) {
  // 加载新音频缓冲区
  const newBuffer = await loadAudioBuffer(url);
  
  // 创建新的增益节点和缓冲区源节点
  const newGainNode = audioCtx.createGain();
  newGainNode.gain.value = 0;
  newGainNode.connect(audioCtx.destination);

  const newSource = audioCtx.createBufferSource();
  newSource.buffer = newBuffer;
  newSource.connect(newGainNode);

  // 处理当前正在播放的音频淡出
  if (currentBufferSource) {
    currentGainNode.gain.linearRampToValueAtTime(
      0,
      audioCtx.currentTime + fadeDuration / 1000
    );
    setTimeout(() => {
      currentBufferSource.stop();
      currentBufferSource.disconnect();
      currentGainNode.disconnect();
    }, fadeDuration);
  }

  // 淡入并播放新音频
  newGainNode.gain.linearRampToValueAtTime(
    1,
    audioCtx.currentTime + fadeDuration / 1000
  );
  newSource.start();

  // 更新当前资源引用
  currentBufferSource = newSource;
  currentGainNode = newGainNode;
}

方案优势 #

• 无需在页面中预先定义多个Audio元素，所有音频资源都是动态创建和销毁的
• Web Audio API提供的linearRampToValueAtTime方法比jQuery的animate更精准，音频过渡更平滑
• 资源管理更高效，不会留下闲置的DOM元素或音频资源

注意：Web Audio API在浏览器中需要用户交互触发（比如点击事件）才能初始化，这是浏览器的安全限制，确保在用户操作后再调用相关方法。

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