能否离线保存Audio Buffer以复用？Web Audio API性能优化问询

当然可以不用每次重复解码WAV文件的流程，下面是几种实用的方案：

1. 序列化Audio Buffer到文件，后续直接加载解析 #

你可以把Audio Buffer的元数据和声道数据序列化成可存储的格式（比如JSON或二进制文件），需要的时候再反序列化回Audio Buffer。

序列化示例代码 #

function serializeAudioBuffer(buffer) {
  const channels = [];
  // 把每个声道的Float32Array转成普通数组
  for (let i = 0; i < buffer.numberOfChannels; i++) {
    channels.push(Array.from(buffer.getChannelData(i)));
  }
  // 打包成包含所有必要信息的JSON对象
  return JSON.stringify({
    sampleRate: buffer.sampleRate,
    numberOfChannels: buffer.numberOfChannels,
    length: buffer.length,
    duration: buffer.duration,
    channels: channels
  });
}

运行这段代码后，把生成的JSON字符串保存成.json文件即可。

反序列化示例代码 #

需要使用时，加载这个JSON文件并重建Audio Buffer：

async function deserializeAudioBuffer(jsonStr, audioContext) {
  const data = JSON.parse(jsonStr);
  // 创建空的Audio Buffer
  const buffer = audioContext.createBuffer(
    data.numberOfChannels,
    data.length,
    data.sampleRate
  );
  // 把每个声道的数据复制回去
  for (let i = 0; i < data.numberOfChannels; i++) {
    buffer.copyToChannel(new Float32Array(data.channels[i]), i);
  }
  return buffer;
}

注意：JSON格式的体积会比原WAV文件大，因为是明文存储浮点数组。如果在意体积，可以把声道数据转成Base64或二进制格式存储，加载时再转回Float32Array。

2. 内存缓存Audio Buffer（会话内复用） #

如果只是在同一个应用会话内多次复用，没必要存到外部文件，初始化时一次性完成解码，把Audio Buffer存在全局缓存里即可：

// 全局缓存对象，存储已解码的Audio Buffer
const audioBufferCache = {};

// 加载并缓存Audio Buffer的函数
async function loadAndCacheAudio(url) {
  // 先检查缓存，存在就直接返回
  if (audioBufferCache[url]) return audioBufferCache[url];
  
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const buffer = await audioContext.decodeAudioData(arrayBuffer);
  
  // 存入缓存
  audioBufferCache[url] = buffer;
  return buffer;
}

// 播放时直接从缓存取
async function playAudio(url) {
  const buffer = await loadAndCacheAudio(url);
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioContext.createBufferSource();
  source.buffer = buffer;
  source.connect(audioContext.destination);
  source.start();
}

这种方式最简单高效，避免重复的网络请求和解码操作。

3. 重新编码成压缩音频格式（跨会话/多客户端复用） #

你也可以把解码后的Audio Buffer重新编码成压缩音频格式（比如MP3），保存成文件后，后续直接加载这个压缩文件。虽然还是需要解码，但压缩后的文件体积更小，加载速度更快，适合跨会话或多客户端复用。

转MP3示例（使用lamejs库） #

function audioBufferToMp3(audioBuffer) {
  const sampleRate = audioBuffer.sampleRate;
  const channels = [];
  for (let i = 0; i < audioBuffer.numberOfChannels; i++) {
    channels.push(audioBuffer.getChannelData(i));
  }

  // 把Float32Array转成lamejs需要的Int16Array
  function floatTo16BitPCM(input) {
    const output = new Int16Array(input.length);
    for (let i = 0; i < input.length; i++) {
      const s = Math.max(-1, Math.min(1, input[i]));
      output[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
    }
    return output;
  }

  const left = floatTo16BitPCM(channels[0]);
  const right = channels.length > 1 ? floatTo16BitPCM(channels[1]) : left;
  
  const mp3encoder = new lamejs.Mp3Encoder(2, sampleRate, 128);
  const mp3Data = [];
  const chunkSize = 1152;

  for (let i = 0; i < left.length; i += chunkSize) {
    const leftChunk = left.subarray(i, i + chunkSize);
    const rightChunk = right.subarray(i, i + chunkSize);
    const mp3buf = mp3encoder.encodeBuffer(leftChunk, rightChunk);
    if (mp3buf.length > 0) mp3Data.push(mp3buf);
  }

  const mp3buf = mp3encoder.flush();
  if (mp3buf.length > 0) mp3Data.push(mp3buf);
  
  // 返回MP3格式的Blob，可下载保存
  return new Blob(mp3Data, { type: 'audio/mp3' });
}

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