w3c / webcodecs

WebCodecs is a flexible web API for encoding and decoding audio and video.

Home Page:https://w3c.github.io/webcodecs/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Web Audio API compatibility

konstantin-paulus opened this issue · comments

Hello, I'm trying to process audio files using the Web Audio API and then to encode the result using the Web Codecs API, here is what a simplified version of my code looks like:

/**
 * Encode an audio file using web codecs
 */
async function encodeAudio(url: string) {
  const audioBuffer = await fetchAudioBuffer(url); // see function below
  const signal = bufferToF32Planar(audioBuffer); // see function below

  const encoder = new AudioEncoder({
    output: console.log,
    error: console.error,
  });

  encoder.configure({
    codec: 'opus',
    sampleRate: 44100,
    numberOfChannels: 2,
    bitrate: 128_000, // 128 kbps
  });

  const data = new AudioData({
    format: 'f32-planar',
    sampleRate: audioBuffer.sampleRate,
    numberOfChannels: audioBuffer.numberOfChannels,
    numberOfFrames: audioBuffer.length,
    timestamp: 0,
    data: signal,
  });

  encoder.encode(data);
}

/**
 * Convert an audio buffer into a planar float 32 array
 * @param input processed audio buffer
 * @returns Typed array
 */
function bufferToF32Planar(input: AudioBuffer): Float32Array {
  const result = new Float32Array(input.length * input.numberOfChannels);

  let offset = 0;
  for (let i = 0; i < input.numberOfChannels; i++) {
    const data = input.getChannelData(i);
    result.set(data, offset);
    offset = data.length;
  }

  return result;
}

/**
 * Fetch the audio file and convert it into
 * an audio buffer using an audio context
 */
async function fetchAudioBuffer(
  input: RequestInfo | URL,
  init?: RequestInit | undefined,
): Promise<AudioBuffer> {
  const context = new AudioContext();
  const res = await fetch(input, init);
  const buffer = await res.arrayBuffer();

  return await context.decodeAudioData(buffer);
}

await encodeAudio('/audio.mp3');

However when I run this code, I'm getting the error DOMException: Input audio buffer is incompatible with codec parameters. What did I do wrong?

This repository is home to the Web Codecs specification.

Questions on how to do something with the WebCodecs API are better suited to something like Stack Overflow.

That said, you should probably double-check the way you configure your encoder (sample-rate, channel count), and what the AudioData contain.