30. august 2025Eesti

Avastage Frontend WebCodecs Audio võimsust reaalajaliste helitöötluskonveierite loomiseks veebirakendustes. Õppige kodeerimis-, dekodeerimis-, filtreerimis- ja visualiseerimistehnikaid.

Frontend WebCodecs Audio: reaalajalise helitöötluskonveieri loomine

WebCodecs API on võimas tööriist heli- ja videoandmetega otse brauseris töötamiseks. Erinevalt traditsioonilisest Web Audio API-st pakub WebCodecs madala taseme juurdepääsu koodekitele, võimaldades arendajatel rakendada kohandatud kodeerimis-, dekodeerimis- ja töötlemiskonveiereid. See avab reaalajas helirakenduste jaoks uute võimaluste maailma, alates täiustatud heliefektidest kuni otseülekannete ja sideplatvormideni.

Mis on WebCodecs Audio?

WebCodecs Audio võimaldab JavaScripti koodil otse suhelda brauseris olevate helikoodekitega. See pakub peeneteralist kontrolli kodeerimis- ja dekodeerimisprotsesside üle, pakkudes olulisi jõudluseeliseid ja paindlikkust võrreldes kõrgema taseme API-dega. WebCodecsi abil saavad arendajad luua väga optimeeritud ja kohandatud helitöötluse töövooge.

WebCodecs Audio peamised eelised:

Madala taseme kontroll: Otsene juurdepääs koodeki parameetritele peenhäälestamiseks ja optimeerimiseks.
Jõudlus: Riistvaraline kiirendus kodeerimiseks ja dekodeerimiseks, mis tagab kiiremad töötlemisajad.
Paindlikkus: Tugi laiale valikule koodekitele ja võimalus rakendada kohandatud töötlemisloogikat.
Reaalaja võimekused: Võimaldab luua reageerivaid ja interaktiivseid helirakendusi.

Oma WebCodecs Audio keskkonna seadistamine

Enne koodi sukeldumist on oluline veenduda, et teie brauser toetab WebCodecsi ja et teil on põhiteadmised JavaScriptist ja asünkroonsest programmeerimisest (Promises, async/await). Enamik kaasaegseid brausereid toetab WebCodecsi, kuid alati on hea mõte ühilduvust kontrollida. Ühilduvust saate kontrollida järgmise koodilõigu abil:

            
if ('AudioEncoder' in window && 'AudioDecoder' in window) {
  console.log('WebCodecs Audio on toetatud!');
} else {
  console.log('WebCodecs Audio EI OLE selles brauseris toetatud.');
}

See kood kontrollib, kas liidesed AudioEncoder ja AudioDecoder on window objektis saadaval. Kui mõlemad on olemas, on WebCodecs Audio toetatud.

Põhilise helitöötluskonveieri loomine

Loome lihtsa näite, mis demonstreerib, kuidas WebCodecsi abil heli kodeerida ja dekodeerida. See näide hõlmab heli salvestamist kasutaja mikrofonist, selle kodeerimist määratud koodekiga ja seejärel taasesitamiseks dekodeerimist.

1. Heli salvestamine mikrofonist

Kasutame getUserMedia API-t kasutaja mikrofonile juurdepääsemiseks. See API nõuab kasutaja luba, seega on oluline loa taotlust korrektselt käsitleda.

            
async function getMicrophoneStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false,
    });
    return stream;
  } catch (error) {
    console.error('Viga mikrofonile juurdepääsemisel:', error);
    return null;
  }
}

const stream = await getMicrophoneStream();
if (!stream) {
  console.log('Mikrofoni juurdepääs keelatud või pole saadaval.');
  return;
}

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const bufferSize = 4096; // Vajadusel kohandage puhvri suurust
const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1); // 1 sisend, 1 väljundkanal

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

scriptProcessor.onaudioprocess = function(event) {
  const audioData = event.inputBuffer.getChannelData(0); // Hangi heliandmed esimesest kanalist
  // Töötle audioAndmeid siin (nt kodeeri, filtreeri)
  encodeAudio(audioData);
};

See koodilõik salvestab heli mikrofonist ja ühendab selle ScriptProcessorNode'iga. Sündmusekäsitleja onaudioprocess käivitub iga kord, kui on saadaval uus heliandmete puhver.

2. Heli kodeerimine WebCodecsiga

Nüüd kodeerime heliandmed, kasutades AudioEncoder API-t. Konfigureerime kodeerija spetsiifiliste koodeki parameetritega.

            
let audioEncoder;

async function initializeEncoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Või 'aac', 'pcm',
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    bitrate: 64000, // Vajadusel kohandage bitikiirust
    // Lisage siia muud koodekispetsiifilised parameetrid
  };

  audioEncoder = new AudioEncoder({
    output: encodedChunk => {
      // Käsitle kodeeritud helitükki
      decodeAudio(encodedChunk);
    },
    error: e => {
      console.error('Kodeerija viga:', e);
    }
  });

  try {
    await audioEncoder.configure(config);
    console.log('Kodeerija edukalt konfigureeritud.');
  } catch (error) {
    console.error('Kodeerija konfigureerimine ebaõnnestus:', error);
  }
}

async function encodeAudio(audioData) {
  if (!audioEncoder) {
        await initializeEncoder(audioContext.sampleRate, 1); // Initsialiseeri mikrofoni voo spetsifikatsioonidega
    }
  // Loo AudioData objekt Float32Array'st
  const audioFrame = new AudioData({
    format: 'f32-planar',
    sampleRate: audioContext.sampleRate,
    numberOfChannels: 1,
    numberOfFrames: audioData.length,
    timestamp: performance.now(), // Kasuta ajatemplit
    data: audioData
  });

  audioEncoder.encode(audioFrame);
  audioFrame.close(); // Vabasta ressursid
}

See kood initsialiseerib AudioEncoder'i määratud koodeki konfiguratsiooniga. Tagasihelistamisfunktsioon output käivitatakse iga kord, kui kodeerija toodab kodeeritud tüki. Funktsioon encodeAudio võtab toored heliandmed ja kodeerib need konfigureeritud kodeerija abil. Konfiguratsioon on ülioluline: katsetage erinevate koodekite (opus, aac) ja bitikiirustega, et saavutada oma konkreetse kasutusjuhtumi jaoks optimaalne kvaliteet ja jõudlus. Nende parameetrite valimisel arvestage sihtplatvormi ja võrgutingimustega. Vorming 'f32-planar' on ülioluline ja peab vastama sissetulevate AudioBufferi andmete vormingule, mis on tavaliselt Float32Array. Ajatemplit kasutatakse helisünkronisatsiooni säilitamiseks.

3. Heli dekodeerimine WebCodecsiga

Nüüd dekodeerime kodeeritud helitükid, kasutades AudioDecoder API-t.

            
let audioDecoder;

async function initializeDecoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Peab vastama kodeerija koodekile
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    // Lisage siia muud koodekispetsiifilised parameetrid
  };

  audioDecoder = new AudioDecoder({
    output: audioFrame => {
      // Käsitle dekodeeritud helikaadrit
      playAudio(audioFrame);
    },
    error: e => {
      console.error('Dekoodri viga:', e);
    }
  });

  try {
    await audioDecoder.configure(config);
    console.log('Dekooder edukalt konfigureeritud.');
  } catch (error) {
    console.error('Dekoodri konfigureerimine ebaõnnestus:', error);
  }
}

async function decodeAudio(encodedChunk) {
    if (!audioDecoder) {
        await initializeDecoder(audioContext.sampleRate, 1); // Initsialiseeri mikrofoni voo spetsifikatsioonidega
    }
  audioDecoder.decode(encodedChunk);
}

See kood initsialiseerib AudioDecoder'i konfiguratsiooniga, mis vastab kodeerijale. Tagasihelistamisfunktsioon output käivitatakse iga kord, kui dekooder toodab dekodeeritud helikaadri. Funktsioon decodeAudio võtab kodeeritud tüki ja dekodeerib selle. Dekoodri konfiguratsioonis kasutatud koodek *peab* vastama kodeerija konfiguratsioonis kasutatud koodekile.

4. Dekodeeritud heli taasesitamine

Lõpuks esitame dekodeeritud heli, kasutades Web Audio API-t.

            
async function playAudio(audioFrame) {
  // Loo AudioBuffer AudioData'st
  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);
  }
  // Loo puhvri allikas ja esita heli
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start();

  audioFrame.close(); // Vabasta ressursid
}

See kood loob dekodeeritud helikaadrist AudioBuffer'i ja kasutab seejärel BufferSource'i sõlme heli esitamiseks läbi helikonteksti sihtkoha. Kriitiline samm siin on andmete kopeerimine `AudioFrame`'ist `AudioBuffer`'i kanaliandmetesse. Peate iga kanali läbi itereerima. Pärast taasesitust veenduge, et vabastate `AudioFrame`'i kasutatud ressursid.

Täiustatud helitöötlustehnikad

WebCodecs Audio avab ukse laiale valikule täiustatud helitöötlustehnikatele. Siin on mõned näited:

1. Heli filtreerimine

Saate rakendada kohandatud helifiltreid, manipuleerides otse heliandmetega. See võimaldab teil luua efekte nagu ekvalaiser, mürasummutus ja reverb.

            
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;
}

See kood rakendab lihtsa kõrgpääsfiltri. Saate seda koodi muuta, et luua erinevat tüüpi filtreid, näiteks madalpääs-, ribapääs- ja sälkfiltreid. Pidage meeles, et filtri konkreetne rakendus sõltub soovitud efektist ja heliandmete omadustest.

2. Heli visualiseerimine

Saate heliandmeid visualiseerida, analüüsides sagedusspektrit ja amplituudi. Seda saab kasutada interaktiivsete visualiseeringute loomiseks, mis reageerivad helile.

            
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; // Skaleeri amplituud lõuendi kõrgusele
    ctx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
    ctx.fillRect(i * barWidth, height / 2 - barHeight / 2, barWidth, barHeight);
  }
}

See kood visualiseerib heliandmed vertikaalsete ribade seeriana. Iga riba kõrgus vastab heli amplituudile sel ajahetkel. Keerukamaid visualiseeringuid saab luua tehnikate abil, nagu Kiire Fourier' teisendus (FFT), et analüüsida sagedusspektrit.

3. Reaalajas heliefektid

Saate luua reaalajas heliefekte, manipuleerides heliandmeid nende töötlemise ajal. See võimaldab teil luua efekte nagu kaja, koor ja moonutus.

            
function applyEchoEffect(audioData, delay, feedback, sampleRate) {
  const delaySamples = Math.round(delay * sampleRate); // Viivitus sämplites
  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;
}

See kood rakendab lihtsa kajefekti. Saate seda koodi muuta, et luua keerukamaid efekte, kombineerides mitmeid helitöötlustehnikaid. Pidage meeles, et reaalajas helitöötlus nõuab hoolikat optimeerimist, et minimeerida latentsust ja tagada sujuv kasutajakogemus.

Kaalutlused globaalsele publikule

Globaalsele publikule helirakenduste arendamisel on oluline arvestada järgmiste teguritega:

Keeletugi: Veenduge, et teie rakendus toetab mitut keelt heliviipade, juhiste ja kasutajaliideste jaoks.
Juurdepääsetavus: Pakkuge puuetega kasutajatele alternatiivseid sisestusmeetodeid, nagu kõnetuvastus ja tekst-kõneks süntees.
Võrgutingimused: Optimeerige oma helikoodekeid ja voogedastusprotokolle erinevate võrgutingimuste jaoks üle maailma. Kaaluge adaptiivse bitikiirusega voogedastust, et kohandada helikvaliteeti vastavalt saadaolevale ribalaiusele.
Kultuuriline tundlikkus: Olge teadlik kultuurilistest erinevustest helieelistustes ja vältige helide või muusika kasutamist, mis võivad teatud piirkondades olla solvavad või sobimatud. Näiteks võivad teatud muusikalised skaalad või rütmid omada erinevaid kultuurilisi konnotatsioone erinevates maailma osades.
Latentsus: Minimeerige latentsust, et tagada reageeriv ja interaktiivne kasutajakogemus, eriti reaalajas suhtlusrakenduste puhul. Kaaluge tehnikate kasutamist, nagu madala latentsusega koodekid ja optimeeritud võrguprotokollid latentsuse vähendamiseks.

Koodilõik: täielik näide

Siin on täielik koodilõik, mis integreerib ülalpool käsitletud kontseptsioonid:

            
// (Kaasa kõik ülaltoodud koodilõigud: getMicrophoneStream, initializeEncoder, encodeAudio,
// initializeDecoder, decodeAudio, playAudio, applyHighPassFilter, visualizeAudio, applyEchoEffect)

async function main() {
  const stream = await getMicrophoneStream();
  if (!stream) {
    console.log('Mikrofoni juurdepääs keelatud või pole saadaval.');
    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);

    // Rakenda kõrgpääsfilter
    const filteredAudioData = applyHighPassFilter(audioData.slice(), 400, audioContext.sampleRate);

    // Rakenda kajefekt
    const echoedAudioData = applyEchoEffect(filteredAudioData.slice(), 0.2, 0.5, audioContext.sampleRate);

    // Visualiseeri heli
    visualizeAudio(echoedAudioData);

    encodeAudio(audioData);
  };
}

main();

Kokkuvõte

Frontend WebCodecs Audio pakub võimsat ja paindlikku viisi reaalajas helitöötluskonveierite loomiseks veebirakendustes. Kasutades WebCodecsi pakutavat madala taseme kontrolli ja riistvaralist kiirendust, saavad arendajad luua väga optimeeritud ja kohandatud helikogemusi. Alates heliefektidest ja visualiseeringutest kuni otseülekannete ja sideplatvormideni avab WebCodecs Audio veebiheli tuleviku jaoks uute võimaluste maailma.

Edasine uurimine

Katsetage erinevate koodekite, parameetrite ja töötlemistehnikatega, et avastada WebCodecs Audio täielik potentsiaal. Ärge kartke uurida kohandatud algoritme ja visualiseeringuid, et luua oma kasutajatele unikaalseid ja kaasahaaravaid helikogemusi. Võimalused on lõputud!