JavaScript 拼接audio

拼接audiobuffer

獲取一個audiobuffer數組，然后把audiobuffer拼接起來。（我沒嘗試成功）

export const mergeAudios = (buffers: AudioBuffer[], sampleRate: number) => {
  const context = new AudioContext();
  let output = context.createBuffer(
    1, // numberOfChannels
    totalLength(buffers),
    sampleRate
  );
  let offset = 0;
  buffers.map(buffer => {
    output.getChannelData(0).set(buffer.getChannelData(0), offset);
    offset += buffer.length;
  });
  return output;
};

const totalLength = (buffers: AudioBuffer[]) => {
  let length = 0;
  for (let i = 0; i < buffers.length; i++) {
    length += buffers[i].length;
  }
  return length;
};

拼接arraybuffer

ArrayBuffer 代表二進制數據結構，只讀。需要轉化為 TypedArray 進行操作。
TypedArray 沒有像數組那樣的 Array.prototype.concat 方法用來連接多個 TypedArray。不過它提供了 TypedArray.prototype.set 可以用來間接連接字符串。原理就是先分配一塊空間足以容納需要連接的 TypedArray，然后逐一在對應位置疊加。

export function getAudioFromArrayBuffers(fragments: ArrayBuffer[], sampleRate: number): Blob {
    const audioCtx = new AudioContext();
  let byteCount = 0;
  for (let i = 0; i < fragments.length; i++) {
    byteCount += fragments[i].byteLength;
  }

  // Output array.
  const sentAudio = new Uint8Array(byteCount);

  byteCount = 0;
  for (var i = 0; i < fragments.length; i++) {
    sentAudio.set(new Uint8Array(fragments[i]), byteCount);
    byteCount += fragments[i].byteLength;
  }

  const audioWithWAV = AddRiffHeader(sentAudio.buffer, sampleRate);//加wav頭
  return audioWithWAV ;
}

加wav頭

拼接Blob

Blob拼接最簡單了，直接const audio = new Blob(audios, { type: "audio/wav" });解決。

拼接Float32Array

export function decompress32(inputData: Float32Array[]) {
  let size = 0;
  for (let i = 0; i < inputData.length; i++) {
    size += inputData[i].length;
  }
  var data = new Float32Array(size);
  var offset = 0;
  for (var i = 0; i < inputData.length; i++) {
    data.set(inputData[i], offset);
    offset += inputData[i].length;
  }
  return data;
}