Frontend WebCodecs Audio: Bygging av en sanntids lydbehandlingspipeline

WebCodecs API er et kraftig verktøy for å jobbe med lyd- og videodata direkte i nettleseren. I motsetning til det tradisjonelle Web Audio API, gir WebCodecs lavnivåtilgang til kodeker, noe som lar utviklere implementere tilpassede koding-, dekoding- og behandlingspipelines. Dette åpner for en verden av muligheter for sanntids lydapplikasjoner, fra avanserte lydeffekter til direktesendt strømming og kommunikasjonsplattformer.

Hva er WebCodecs Audio?

WebCodecs Audio lar JavaScript-kode samhandle direkte med lydkodeker i nettleseren. Det gir finkornet kontroll over kodings- og dekodingsprosessene, noe som gir betydelige ytelsesfordeler og fleksibilitet sammenlignet med API-er på høyere nivå. Ved å utnytte WebCodecs kan utviklere skape høyt optimaliserte og tilpassede arbeidsflyter for lydbehandling.

Hovedfordeler med WebCodecs Audio:

• Lavnivåkontroll: Direkte tilgang til kodekparametere for finjustering og optimalisering.
• Ytelse: Maskinvareakselerasjon for koding og dekoding, noe som fører til raskere behandlingstider.
• Fleksibilitet: Støtte for et bredt spekter av kodeker og muligheten til å implementere tilpasset behandlingslogikk.
• Sanntidskapasiteter: Muliggjør opprettelsen av responsive og interaktive lydapplikasjoner.

Sette opp ditt WebCodecs Audio-miljø

Før du dykker ned i koden, er det avgjørende å sikre at nettleseren din støtter WebCodecs og at du har en grunnleggende forståelse av JavaScript og asynkron programmering (Promises, async/await). De fleste moderne nettlesere støtter WebCodecs, men det er alltid en god idé å sjekke kompatibilitet. Du kan sjekke kompatibilitet ved hjelp av følgende kodebit:

            
if ('AudioEncoder' in window && 'AudioDecoder' in window) {
  console.log('WebCodecs Audio støttes!');
} else {
  console.log('WebCodecs Audio støttes IKKE i denne nettleseren.');
}

            

              
                Copy
              
            
          

Denne koden sjekker om AudioEncoder- og AudioDecoder-grensesnittene er tilgjengelige i window-objektet. Hvis begge er til stede, støttes WebCodecs Audio.

Bygge en grunnleggende lydbehandlingspipeline

La oss lage et enkelt eksempel som demonstrerer hvordan man koder og dekoder lyd ved hjelp av WebCodecs. Dette eksempelet vil innebære å fange opp lyd fra brukerens mikrofon, kode den ved hjelp av en spesifisert kodek, og deretter dekode den tilbake for avspilling.

1. Fange opp lyd fra mikrofonen

Vi bruker getUserMedia-API-et for å få tilgang til brukerens mikrofon. Dette API-et krever brukertillatelse, så det er viktig å håndtere tillatelsesforespørselen på en elegant måte.

            
async function getMicrophoneStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false,
    });
    return stream;
  } catch (error) {
    console.error('Feil ved tilgang til mikrofon:', error);
    return null;
  }
}

const stream = await getMicrophoneStream();
if (!stream) {
  console.log('Mikrofontilgang nektet eller utilgjengelig.');
  return;
}

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const bufferSize = 4096; // Juster bufferstørrelsen etter behov
const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1); // 1 inngang, 1 utgangskanal

source.connect(scriptProcessor);
scriptProcessor.connect(audioContext.destination);

scriptProcessor.onaudioprocess = function(event) {
  const audioData = event.inputBuffer.getChannelData(0); // Hent lyddata fra den første kanalen
  // Behandle audioData her (f.eks. kode, filtrere)
  encodeAudio(audioData);
};

            

              
                Copy
              
            
          

Denne kodebiten fanger opp lyd fra mikrofonen og kobler den til en ScriptProcessorNode. onaudioprocess-hendelseshåndtereren utløses hver gang en ny buffer med lyddata er tilgjengelig.

2. Kode lyd med WebCodecs

La oss nå kode lyddataene ved hjelp av AudioEncoder-API-et. Vi vil konfigurere koderen med spesifikke kodekparametere.

            
let audioEncoder;

async function initializeEncoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Eller 'aac', 'pcm',
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    bitrate: 64000, // Juster bitrate etter behov
    // Legg til andre kodek-spesifikke parametere her
  };

  audioEncoder = new AudioEncoder({
    output: encodedChunk => {
      // Håndter kodet lyd-chunk
      decodeAudio(encodedChunk);
    },
    error: e => {
      console.error('Koderfeil:', e);
    }
  });

  try {
    await audioEncoder.configure(config);
    console.log('Koderen er konfigurert.');
  } catch (error) {
    console.error('Kunne ikke konfigurere koderen:', error);
  }
}

async function encodeAudio(audioData) {
  if (!audioEncoder) {
        await initializeEncoder(audioContext.sampleRate, 1); //Initialiser med spesifikasjoner for mikrofonstrømmen
    }
  // Opprett et AudioData-objekt fra Float32Array
  const audioFrame = new AudioData({
    format: 'f32-planar',
    sampleRate: audioContext.sampleRate,
    numberOfChannels: 1,
    numberOfFrames: audioData.length,
    timestamp: performance.now(), // Bruk et tidsstempel
    data: audioData
  });

  audioEncoder.encode(audioFrame);
  audioFrame.close(); // Frigjør ressurser
}

            

              
                Copy
              
            
          

Denne koden initialiserer en AudioEncoder med den spesifiserte kodekkonfigurasjonen. output-callbacken påkalles hver gang koderen produserer en kodet chunk. encodeAudio-funksjonen tar de rå lyddataene og koder dem ved hjelp av den konfigurerte koderen. Konfigurasjonen er avgjørende: eksperimenter med forskjellige kodeker (opus, aac) og bitrater for å oppnå optimal kvalitet og ytelse for ditt spesifikke bruksområde. Vurder målplattformen og nettverksforholdene når du velger disse parameterne. 'f32-planar'-formatet er avgjørende og må samsvare med formatet på de innkommende AudioBuffer-dataene, som vanligvis er et Float32Array. Tidsstempelet brukes til å hjelpe med å opprettholde lydsynkronisering.

3. Dekode lyd med WebCodecs

La oss nå dekode de kodede lyd-chunkene ved hjelp av AudioDecoder-API-et.

            
let audioDecoder;

async function initializeDecoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Må samsvare med koderens kodek
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    // Legg til andre kodek-spesifikke parametere her
  };

  audioDecoder = new AudioDecoder({
    output: audioFrame => {
      // Håndter dekodet lydramme
      playAudio(audioFrame);
    },
    error: e => {
      console.error('Dekoderfeil:', e);
    }
  });

  try {
    await audioDecoder.configure(config);
    console.log('Dekoderen er konfigurert.');
  } catch (error) {
    console.error('Kunne ikke konfigurere dekoderen:', error);
  }
}

async function decodeAudio(encodedChunk) {
    if (!audioDecoder) {
        await initializeDecoder(audioContext.sampleRate, 1); //Initialiser med spesifikasjoner for mikrofonstrømmen
    }
  audioDecoder.decode(encodedChunk);
}

            

              
                Copy
              
            
          

Denne koden initialiserer en AudioDecoder med en konfigurasjon som samsvarer med koderen. output-callbacken påkalles hver gang dekoderen produserer en dekodet lydramme. decodeAudio-funksjonen tar den kodede chunken og dekoder den. Kodeken som brukes i dekoderkonfigurasjonen *må* samsvare med kodeken som brukes i koderkonfigurasjonen.

4. Spille av den dekodede lyden

Til slutt, la oss spille av den dekodede lyden ved hjelp av Web Audio API.

            
async function playAudio(audioFrame) {
  // Opprett en AudioBuffer fra AudioData
  const numberOfChannels = audioFrame.numberOfChannels;
  const sampleRate = audioFrame.sampleRate;
  const length = audioFrame.numberOfFrames;
  const audioBuffer = audioContext.createBuffer(numberOfChannels, length, sampleRate);

  for (let channel = 0; channel < numberOfChannels; channel++) {
    const channelData = audioBuffer.getChannelData(channel);
    const frame = new Float32Array(length);
    await audioFrame.copyTo(frame, { planeIndex: channel });
    channelData.set(frame);
  }
  // Opprett en bufferkilde og spill av lyden
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start();

  audioFrame.close(); // Frigjør ressurser
}

            

              
                Copy
              
            
          

Denne koden oppretter en AudioBuffer fra den dekodede lydrammen og bruker deretter en BufferSource-node for å spille av lyden gjennom lydkontekstens destinasjon. Det kritiske trinnet her er å kopiere dataene fra `AudioFrame` til `AudioBuffer`s kanaldata. Du må iterere gjennom hver kanal. Etter avspilling, sørg for å frigjøre ressursene som brukes av `AudioFrame`.

Avanserte lydbehandlingsteknikker

WebCodecs Audio åpner døren for et bredt spekter av avanserte lydbehandlingsteknikker. Her er noen eksempler:

1. Lydfiltrering

Du kan implementere tilpassede lydfiltre ved å manipulere lyddataene direkte. Dette lar deg lage effekter som equalisering, støyreduksjon og romklang.

            
function applyHighPassFilter(audioData, cutoffFrequency, sampleRate) {
  const rc = 1.0 / (2 * Math.PI * cutoffFrequency);
  const dt = 1.0 / sampleRate;
  const alpha = dt / (rc + dt);

  let previousValue = audioData[0];
  for (let i = 1; i < audioData.length; i++) {
    const newValue = alpha * (previousValue + audioData[i] - previousValue);
    audioData[i] = newValue;
    previousValue = newValue;
  }
  return audioData;
}

            

              
                Copy
              
            
          

Denne koden implementerer et enkelt høypassfilter. Du kan endre denne koden for å lage forskjellige typer filtre, som lavpass-, båndpass- og notch-filtre. Husk at den spesifikke implementeringen av filteret vil avhenge av den ønskede effekten og egenskapene til lyddataene.

2. Lydvisualisering

Du kan visualisere lyddata ved å analysere frekvensspekteret og amplituden. Dette kan brukes til å lage interaktive visualiseringer som reagerer på lyden.

            
function visualizeAudio(audioData) {
  const canvas = document.getElementById('audio-visualizer');
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;

  ctx.clearRect(0, 0, width, height);

  const barWidth = width / audioData.length;
  for (let i = 0; i < audioData.length; i++) {
    const barHeight = audioData[i] * height / 2; // Skaler amplitude til canvas-høyden
    ctx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
    ctx.fillRect(i * barWidth, height / 2 - barHeight / 2, barWidth, barHeight);
  }
}

            

              
                Copy
              
            
          

Denne koden visualiserer lyddataene som en serie vertikale stolper. Høyden på hver stolpe tilsvarer amplituden til lyden på det tidspunktet. Mer avanserte visualiseringer kan lages ved hjelp av teknikker som Fast Fourier Transform (FFT) for å analysere frekvensspekteret.

3. Sanntids lydeffekter

Du kan lage sanntids lydeffekter ved å manipulere lyddataene mens de behandles. Dette lar deg lage effekter som ekko, kor og forvrengning.

            
function applyEchoEffect(audioData, delay, feedback, sampleRate) {
  const delaySamples = Math.round(delay * sampleRate); // Forsinkelse i sampler
  const echoBuffer = new Float32Array(audioData.length + delaySamples);
  echoBuffer.set(audioData, delaySamples);

  for (let i = 0; i < audioData.length; i++) {
    audioData[i] += echoBuffer[i] * feedback;
  }
  return audioData;
}

            

              
                Copy
              
            
          

Denne koden implementerer en enkel ekkoeffekt. Du kan endre denne koden for å lage mer komplekse effekter ved å kombinere flere lydbehandlingsteknikker. Husk at sanntids lydbehandling krever nøye optimalisering for å minimere latens og sikre en jevn brukeropplevelse.

Hensyn til et globalt publikum

Når du utvikler lydapplikasjoner for et globalt publikum, er det viktig å vurdere følgende faktorer:

• Språkstøtte: Sørg for at applikasjonen din støtter flere språk for lydmeldinger, instruksjoner og brukergrensesnitt.
• Tilgjengelighet: Tilby alternative inndatametoder for brukere med nedsatt funksjonsevne, som talegjenkjenning og tekst-til-tale.
• Nettverksforhold: Optimaliser lydkodekene og strømmeprotokollene dine for forskjellige nettverksforhold rundt om i verden. Vurder adaptiv bitrate-strømming for å justere lydkvaliteten basert på tilgjengelig båndbredde.
• Kulturell sensitivitet: Vær oppmerksom på kulturelle forskjeller i lydpreferanser og unngå å bruke lyder eller musikk som kan være støtende eller upassende i visse regioner. For eksempel kan visse musikalske skalaer eller rytmer ha forskjellige kulturelle konnotasjoner i forskjellige deler av verden.
• Latens: Minimer latens for å sikre en responsiv og interaktiv brukeropplevelse, spesielt for sanntidskommunikasjonsapplikasjoner. Vurder å bruke teknikker som kodeker med lav latens og optimaliserte nettverksprotokoller for å redusere latens.

Kodebit: Komplett eksempel

Her er en komplett kodebit som integrerer konseptene som er diskutert ovenfor:

            
// (Inkluder alle kodebitene ovenfra: getMicrophoneStream, initializeEncoder, encodeAudio,
// initializeDecoder, decodeAudio, playAudio, applyHighPassFilter, visualizeAudio, applyEchoEffect)

async function main() {
  const stream = await getMicrophoneStream();
  if (!stream) {
    console.log('Mikrofontilgang nektet eller utilgjengelig.');
    return;
  }

  const audioContext = new AudioContext();
  const source = audioContext.createMediaStreamSource(stream);
  const bufferSize = 4096;
  const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);

  source.connect(scriptProcessor);
  scriptProcessor.connect(audioContext.destination);

  scriptProcessor.onaudioprocess = function(event) {
    const audioData = event.inputBuffer.getChannelData(0);

    // Bruk et høypassfilter
    const filteredAudioData = applyHighPassFilter(audioData.slice(), 400, audioContext.sampleRate);

    // Bruk en ekkoeffekt
    const echoedAudioData = applyEchoEffect(filteredAudioData.slice(), 0.2, 0.5, audioContext.sampleRate);

    // Visualiser lyden
    visualizeAudio(echoedAudioData);

    encodeAudio(audioData);
  };
}

main();

            

              
                Copy
              
            
          

Konklusjon

Frontend WebCodecs Audio gir en kraftig og fleksibel måte å bygge sanntids lydbehandlingspipelines i nettapplikasjoner. Ved å utnytte lavnivåkontrollen og maskinvareakselerasjonen som WebCodecs tilbyr, kan utviklere skape høyt optimaliserte og tilpassede lydopplevelser. Fra lydeffekter og visualiseringer til direktesendt strømming og kommunikasjonsplattformer, åpner WebCodecs Audio for en verden av muligheter for fremtiden til nettlyd.

Videre utforskning

• WebCodecs API-dokumentasjon
• AudioEncoder API-dokumentasjon
• AudioDecoder API-dokumentasjon

Eksperimenter med forskjellige kodeker, parametere og behandlingsteknikker for å oppdage det fulle potensialet til WebCodecs Audio. Ikke vær redd for å utforske tilpassede algoritmer og visualiseringer for å skape unike og engasjerende lydopplevelser for brukerne dine. Mulighetene er uendelige!