Frontend WebCodecs Audio: Reaaliaikaisen audioprosessointiputken rakentaminen

WebCodecs API on tehokas työkalu ääni- ja videodatan käsittelyyn suoraan selaimessa. Toisin kuin perinteinen Web Audio API, WebCodecs tarjoaa matalan tason pääsyn koodekkeihin, mikä mahdollistaa kehittäjille omien koodaus-, purku- ja prosessointiputkien toteuttamisen. Tämä avaa maailman täynnä mahdollisuuksia reaaliaikaisille äänisovelluksille, edistyneistä ääniefekteistä suoratoisto- ja viestintäalustoihin.

Mitä on WebCodecs Audio?

WebCodecs Audio antaa JavaScript-koodille mahdollisuuden olla suoraan vuorovaikutuksessa selaimen äänikoodekkien kanssa. Se tarjoaa hienojakoista hallintaa koodaus- ja purkuprosesseihin, mikä tuo merkittäviä suorituskykyetuja ja joustavuutta verrattuna korkeamman tason API-rajapintoihin. Hyödyntämällä WebCodecsia kehittäjät voivat luoda erittäin optimoituja ja räätälöityjä audioprosessoinnin työnkulkuja.

WebCodecs Audion keskeiset edut:

• Matalan tason hallinta: Suora pääsy koodekkiparametreihin hienosäätöä ja optimointia varten.
• Suorituskyky: Laitteistokiihdytys koodauksessa ja purussa, mikä johtaa nopeampiin käsittelyaikoihin.
• Joustavuus: Tuki laajalle valikoimalle koodekkeja ja mahdollisuus toteuttaa mukautettua prosessointilogiikkaa.
• Reaaliaikaiset ominaisuudet: Mahdollistaa responsiivisten ja interaktiivisten äänisovellusten luomisen.

WebCodecs Audio -ympäristön pystyttäminen

Ennen koodiin sukeltamista on tärkeää varmistaa, että selaimesi tukee WebCodecsia ja että sinulla on perustiedot JavaScriptistä ja asynkronisesta ohjelmoinnista (Promises, async/await). Useimmat nykyaikaiset selaimet tukevat WebCodecsia, mutta yhteensopivuus on aina hyvä tarkistaa. Voit tarkistaa yhteensopivuuden seuraavalla koodinpätkällä:

            
if ('AudioEncoder' in window && 'AudioDecoder' in window) {
  console.log('WebCodecs Audio on tuettu!');
} else {
  console.log('WebCodecs Audio EI OLE tuettu tässä selaimessa.');
}

            

              
                Copy
              
            
          

Tämä koodi tarkistaa, ovatko AudioEncoder- ja AudioDecoder-rajapinnat saatavilla window-objektissa. Jos molemmat ovat läsnä, WebCodecs Audio on tuettu.

Perusmuotoisen audioprosessointiputken rakentaminen

Luodaan yksinkertainen esimerkki, joka näyttää, miten ääntä koodataan ja puretaan WebCodecsin avulla. Tässä esimerkissä kaapataan ääntä käyttäjän mikrofonista, koodataan se määritellyllä koodekilla ja puretaan se sitten takaisin toistoa varten.

1. Äänen kaappaaminen mikrofonista

Käytämme getUserMedia-APIa päästäksemme käsiksi käyttäjän mikrofoniin. Tämä API vaatii käyttäjän luvan, joten on tärkeää käsitellä lupapyyntö asianmukaisesti.

            
async function getMicrophoneStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false,
    });
    return stream;
  } catch (error) {
    console.error('Virhe mikrofonin käytössä:', error);
    return null;
  }
}

const stream = await getMicrophoneStream();
if (!stream) {
  console.log('Mikrofonin käyttö estetty tai mikrofoni ei ole saatavilla.');
  return;
}

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const bufferSize = 4096; // Säädä puskurin kokoa tarpeen mukaan
const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1); // 1 tulo-, 1 lähtökanava

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

scriptProcessor.onaudioprocess = function(event) {
  const audioData = event.inputBuffer.getChannelData(0); // Hae äänidata ensimmäisestä kanavasta
  // Käsittele audioData tässä (esim. koodaa, suodata)
  encodeAudio(audioData);
};

            

              
                Copy
              
            
          

Tämä koodinpätkä kaappaa ääntä mikrofonista ja yhdistää sen ScriptProcessorNode-solmuun. onaudioprocess-tapahtumankäsittelijä käynnistyy aina, kun uusi puskuri äänidataa on saatavilla.

2. Äänen koodaaminen WebCodecseilla

Nyt koodataan äänidata käyttämällä AudioEncoder-APIa. Määritämme kooderille tietyt koodekkiparametrit.

            
let audioEncoder;

async function initializeEncoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Tai 'aac', 'pcm',
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    bitrate: 64000, // Säädä bittinopeutta tarpeen mukaan
    // Lisää muita koodekkikohtaisia parametreja tähän
  };

  audioEncoder = new AudioEncoder({
    output: encodedChunk => {
      // Käsittele koodattu äänipala
      decodeAudio(encodedChunk);
    },
    error: e => {
      console.error('Kooderin virhe:', e);
    }
  });

  try {
    await audioEncoder.configure(config);
    console.log('Kooderi määritetty onnistuneesti.');
  } catch (error) {
    console.error('Kooderin määritys epäonnistui:', error);
  }
}

async function encodeAudio(audioData) {
  if (!audioEncoder) {
        await initializeEncoder(audioContext.sampleRate, 1); // Alusta mikrofonivirran määrityksillä
    }
  // Luo AudioData-objekti Float32Arraysta
  const audioFrame = new AudioData({
    format: 'f32-planar',
    sampleRate: audioContext.sampleRate,
    numberOfChannels: 1,
    numberOfFrames: audioData.length,
    timestamp: performance.now(), // Käytä aikaleimaa
    data: audioData
  });

  audioEncoder.encode(audioFrame);
  audioFrame.close(); // Vapauta resurssit
}

            

              
                Copy
              
            
          

Tämä koodi alustaa AudioEncoderin määritetyllä koodekkikonfiguraatiolla. output-takaisinkutsu suoritetaan aina, kun kooderi tuottaa koodatun palan. encodeAudio-funktio ottaa raa'an äänidatan ja koodaa sen määritetyllä kooderilla. Konfiguraatio on ratkaisevan tärkeä: kokeile eri koodekkeja (opus, aac) ja bittinopeuksia saavuttaaksesi optimaalisen laadun ja suorituskyvyn omaan käyttötapaukseesi. Ota huomioon kohdealusta ja verkko-olosuhteet näitä parametreja valitessasi. 'f32-planar'-muoto on olennainen ja sen on vastattava saapuvan AudioBuffer-datan muotoa, joka on yleensä Float32Array. Aikaleimaa käytetään auttamaan äänen synkronoinnin ylläpitämisessä.

3. Äänen purkaminen WebCodecseilla

Nyt puretaan koodatut äänipalat käyttämällä AudioDecoder-APIa.

            
let audioDecoder;

async function initializeDecoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Pitää vastata kooderin koodekkia
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    // Lisää muita koodekkikohtaisia parametreja tähän
  };

  audioDecoder = new AudioDecoder({
    output: audioFrame => {
      // Käsittele purettu äänikehys
      playAudio(audioFrame);
    },
    error: e => {
      console.error('Dekooderin virhe:', e);
    }
  });

  try {
    await audioDecoder.configure(config);
    console.log('Dekooderi määritetty onnistuneesti.');
  } catch (error) {
    console.error('Dekooderin määritys epäonnistui:', error);
  }
}

async function decodeAudio(encodedChunk) {
    if (!audioDecoder) {
        await initializeDecoder(audioContext.sampleRate, 1); // Alusta mikrofonivirran määrityksillä
    }
  audioDecoder.decode(encodedChunk);
}

            

              
                Copy
              
            
          

Tämä koodi alustaa AudioDecoderin konfiguraatiolla, joka vastaa kooderia. output-takaisinkutsu suoritetaan aina, kun dekooderi tuottaa puretun äänikehyksen. decodeAudio-funktio ottaa koodatun palan ja purkaa sen. Dekooderin konfiguraatiossa käytetyn koodekin *on* vastattava kooderin konfiguraatiossa käytettyä koodekkia.

4. Puretun äänen toistaminen

Lopuksi toistetaan purettu ääni Web Audio API:n avulla.

            
async function playAudio(audioFrame) {
  // Luo AudioBuffer AudioDatasta
  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);
  }
  // Luo puskurilähde ja toista ääni
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start();

  audioFrame.close(); // Vapauta resurssit
}

            

              
                Copy
              
            
          

Tämä koodi luo AudioBufferin puretusta äänikehyksestä ja käyttää sitten BufferSource-solmua toistaakseen äänen audiokontekstin määränpään kautta. Kriittinen vaihe tässä on kopioida data AudioFrame-kehyksestä AudioBufferin kanavadataan. Sinun on käytävä läpi jokainen kanava. Varmista toiston jälkeen, että vapautat AudioFrame-kehyksen käyttämät resurssit.

Edistyneet audioprosessointitekniikat

WebCodecs Audio avaa oven monenlaisille edistyneille audioprosessointitekniikoille. Tässä on muutamia esimerkkejä:

1. Äänen suodatus

Voit toteuttaa mukautettuja äänen suodattimia manipuloimalla äänidataa suoraan. Tämä antaa sinun luoda efektejä, kuten taajuuskorjausta, kohinanvaimennusta ja kaikua.

            
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
              
            
          

Tämä koodi toteuttaa yksinkertaisen ylipäästösuodattimen. Voit muokata tätä koodia luodaksesi erilaisia suodattimia, kuten alipäästö-, kaistanpäästö- ja kaistanestosuodattimia. Muista, että suodattimen erityinen toteutus riippuu halutusta efektistä ja äänidatan ominaisuuksista.

2. Äänen visualisointi

Voit visualisoida äänidataa analysoimalla taajuusspektriä ja amplitudia. Tätä voidaan käyttää luomaan interaktiivisia visualisointeja, jotka reagoivat ääneen.

            
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; // Skaalaa amplitudi kanvaasin korkeuteen
    ctx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
    ctx.fillRect(i * barWidth, height / 2 - barHeight / 2, barWidth, barHeight);
  }
}

            

              
                Copy
              
            
          

Tämä koodi visualisoi äänidatan sarjana pystysuoria palkkeja. Kunkin palkin korkeus vastaa äänen amplitudia kyseisessä ajanhetkessä. Edistyneempiä visualisointeja voidaan luoda käyttämällä tekniikoita, kuten nopeaa Fourier-muunnosta (FFT), taajuusspektrin analysoimiseksi.

3. Reaaliaikaiset ääniefektit

Voit luoda reaaliaikaisia ääniefektejä manipuloimalla äänidataa sen käsittelyn aikana. Tämä antaa sinun luoda efektejä, kuten kaiku-, chorus- ja säröefektejä.

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

Tämä koodi toteuttaa yksinkertaisen kaikuefektin. Voit muokata tätä koodia luodaksesi monimutkaisempia efektejä yhdistämällä useita audioprosessointitekniikoita. Muista, että reaaliaikainen audioprosessointi vaatii huolellista optimointia latenssin minimoimiseksi ja sujuvan käyttökokemuksen varmistamiseksi.

Huomioita globaaleille yleisöille

Kehitettäessä äänisovelluksia globaalille yleisölle on tärkeää ottaa huomioon seuraavat tekijät:

• Kielituki: Varmista, että sovelluksesi tukee useita kieliä äänikehotteissa, ohjeissa ja käyttöliittymissä.
• Saavutettavuus: Tarjoa vaihtoehtoisia syöttötapoja vammaisille käyttäjille, kuten puheentunnistus ja tekstistä puheeksi -toiminnot.
• Verkko-olosuhteet: Optimoi äänikoodekit ja suoratoistoprotokollat eri verkko-olosuhteisiin ympäri maailmaa. Harkitse mukautuvaa bittinopeuden suoratoistoa säätääksesi äänenlaatua käytettävissä olevan kaistanleveyden mukaan.
• Kulttuurinen herkkyys: Ota huomioon kulttuuriset erot äänimieltymyksissä ja vältä sellaisten äänien tai musiikin käyttöä, jotka voivat olla loukkaavia tai sopimattomia tietyillä alueilla. Esimerkiksi tietyillä musiikillisilla asteikoilla tai rytmeillä voi olla erilaisia kulttuurisia konnotaatioita eri puolilla maailmaa.
• Latenssi: Minimoi latenssi varmistaaksesi responsiivisen ja interaktiivisen käyttökokemuksen, erityisesti reaaliaikaisissa viestintäsovelluksissa. Harkitse tekniikoita, kuten matalan latenssin koodekkeja ja optimoituja verkkoprotokollia, latenssin vähentämiseksi.

Koodinpätkä: Kokonainen esimerkki

Tässä on kokonainen koodinpätkä, joka yhdistää yllä käsitellyt konseptit:

            
// (Sisällytä kaikki yllä olevat koodinpätkät: getMicrophoneStream, initializeEncoder, encodeAudio,
// initializeDecoder, decodeAudio, playAudio, applyHighPassFilter, visualizeAudio, applyEchoEffect)

async function main() {
  const stream = await getMicrophoneStream();
  if (!stream) {
    console.log('Mikrofonin käyttö estetty tai mikrofoni ei ole saatavilla.');
    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);

    // Käytä ylipäästösuodatinta
    const filteredAudioData = applyHighPassFilter(audioData.slice(), 400, audioContext.sampleRate);

    // Käytä kaikuefektiä
    const echoedAudioData = applyEchoEffect(filteredAudioData.slice(), 0.2, 0.5, audioContext.sampleRate);

    // Visualisoi ääni
    visualizeAudio(echoedAudioData);

    encodeAudio(audioData);
  };
}

main();

            

              
                Copy
              
            
          

Yhteenveto

Frontend WebCodecs Audio tarjoaa tehokkaan ja joustavan tavan rakentaa reaaliaikaisia audioprosessointiputkia verkkosovelluksiin. Hyödyntämällä WebCodecsin tarjoamaa matalan tason hallintaa ja laitteistokiihdytystä kehittäjät voivat luoda erittäin optimoituja ja räätälöityjä äänikokemuksia. Ääniefekteistä ja visualisoinneista suoratoisto- ja viestintäalustoihin, WebCodecs Audio avaa maailman täynnä mahdollisuuksia web-äänen tulevaisuudelle.

Lisätutkimus

• WebCodecs API -dokumentaatio
• AudioEncoder API -dokumentaatio
• AudioDecoder API -dokumentaatio

Kokeile erilaisia koodekkeja, parametreja ja prosessointitekniikoita löytääksesi WebCodecs Audion koko potentiaalin. Älä pelkää tutkia omia algoritmeja ja visualisointeja luodaksesi ainutlaatuisia ja mukaansatempaavia äänikokemuksia käyttäjillesi. Mahdollisuudet ovat rajattomat!