Mänguheli: põhjalik juhend Web Audio API-le

Web Audio API on võimas süsteem heli haldamiseks veebis. See võimaldab arendajatel luua keerukaid helitöötlusgraafikuid, pakkudes rikkalikke ja interaktiivseid helikogemusi veebimängudes, interaktiivsetes rakendustes ja multimeediaprojektides. See juhend annab põhjaliku ülevaate Web Audio API-st, hõlmates põhimõisteid, praktilisi tehnikaid ja täiustatud funktsioone professionaalseks mänguheli arenduseks. Olenemata sellest, kas olete kogenud heliinsener või veebiarendaja, kes soovib oma projektidele heli lisada, annab see juhend teile teadmised ja oskused Web Audio API täieliku potentsiaali rakendamiseks.

Web Audio API alused

Helikontekst (AudioContext)

Web Audio API südames on AudioContext. Mõelge sellest kui helimootorist – see on keskkond, kus kogu helitöötlus toimub. Loote AudioContext-i instantsi ja seejärel ühendatakse kõik teie helisõlmed (allikad, efektid, sihtkohad) selle konteksti sees.

Näide:

            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            

              
                Copy
              
            
          

See kood loob uue AudioContext-i, võttes arvesse brauserite ühilduvust (mõned vanemad brauserid võivad kasutada webkitAudioContext-i).

Helisõlmed: ehitusplokid

Helisõlmed on üksikud üksused, mis töötlevad ja manipuleerivad heli. Need võivad olla heliallikad (nagu helifailid või ostsillaatorid), heliefektid (nagu kaja või viivitus) või sihtkohad (nagu teie kõlarid). Nende sõlmede omavaheliseks ühendamiseks moodustatakse helitöötlusgraafik.

Mõned levinumad helisõlmede tüübid on:

• AudioBufferSourceNode: Esitab heli helipuhvrist (failist laaditud).
• OscillatorNode: Genereerib perioodilisi lainekujusid (siinus-, ruut-, saehammas-, kolmnurklaine).
• GainNode: Kontrollib helisignaali helitugevust.
• DelayNode: Loob viivitusefekti.
• BiquadFilterNode: Rakendab erinevaid filtritüüpe (madalpääs-, kõrgpääs-, ribapääsfilter jne).
• AnalyserNode: Pakub heli reaalajas sagedus- ja ajadomeeni analüüsi.
• ConvolverNode: Rakendab konvolutsiooniefekti (nt kaja).
• DynamicsCompressorNode: Vähendab dünaamiliselt heli dünaamilist ulatust.
• StereoPannerNode: Panoraamib helisignaali vasaku ja parema kanali vahel.

Helisõlmede ühendamine

Meetodit connect() kasutatakse helisõlmede omavaheliseks ühendamiseks. Ühe sõlme väljund ühendatakse teise sisendiga, moodustades signaalitee.

Näide:

            sourceNode.connect(gainNode);
gainNode.connect(audioContext.destination); // Ühenda kõlaritega
            

              
                Copy
              
            
          

See kood ühendab heliallika sõlme võimendussõlmega ja seejärel ühendab võimendussõlme AudioContext-i sihtkohaga (teie kõlaritega). Helisignaal liigub allikast läbi võimenduse kontrolli ja seejärel väljundisse.

Heli laadimine ja esitamine

Heliandmete toomine

Helifailide esitamiseks peate esmalt tooma heliandmed. Tavaliselt tehakse seda XMLHttpRequest-i või fetch API abil.

Näide (kasutades fetch-i):

            fetch('audio/mysound.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    // Heliandmed on nüüd audioBuffer'is
    // Saate luua AudioBufferSourceNode'i ja selle esitada
  })
  .catch(error => console.error('Heli laadimisel tekkis viga:', error));
            

              
                Copy
              
            
          

See kood toob helifaili ('audio/mysound.mp3'), dekodeerib selle AudioBuffer-iks ja tegeleb võimalike vigadega. Veenduge, et teie server on seadistatud serveerima helifaile õige MIME tüübiga (nt audio/mpeg MP3 jaoks).

AudioBufferSourceNode'i loomine ja esitamine

Kui teil on olemas AudioBuffer, saate luua AudioBufferSourceNode-i ja määrata sellele puhvri.

Näide:

            const sourceNode = audioContext.createBufferSource();
sourceNode.buffer = audioBuffer;
sourceNode.connect(audioContext.destination);
sourceNode.start(); // Alusta heli esitamist
            

              
                Copy
              
            
          

See kood loob AudioBufferSourceNode-i, määrab sellele laaditud helipuhvri, ühendab selle AudioContext-i sihtkohaga ja alustab heli esitamist. Meetod start() võib võtta valikulise ajaparameetri, et määrata, millal heli esitamine peaks algama (sekundites alates helikonteksti algusajast).

Taasesituse juhtimine

Saate juhtida AudioBufferSourceNode-i taasesitust, kasutades selle omadusi ja meetodeid:

• start(when, offset, duration): Alustab taasesitust määratud ajal, valikulise nihke ja kestusega.
• stop(when): Peatab taasesituse määratud ajal.
• loop: Boolean-tüüpi omadus, mis määrab, kas heli peaks korduma.
• loopStart: Korduse alguspunkt (sekundites).
• loopEnd: Korduse lõpp-punkt (sekundites).
• playbackRate.value: Kontrollib taasesituse kiirust (1 on normaalne kiirus).

Näide (heli kordamine):

            sourceNode.loop = true;
sourceNode.start();
            

              
                Copy
              
            
          

Heliefektide loomine

Võimenduse kontroll (helitugevus)

GainNode-i kasutatakse helisignaali helitugevuse reguleerimiseks. Saate luua GainNode-i ja ühendada selle signaaliteele helitugevuse reguleerimiseks.

Näide:

            const gainNode = audioContext.createGain();
sourceNode.connect(gainNode);
gainNode.connect(audioContext.destination);
gainNode.gain.value = 0.5; // Määra võimendus 50% peale
            

              
                Copy
              
            
          

Omadus gain.value kontrollib võimendustegurit. Väärtus 1 tähendab helitugevuse muutumatust, väärtus 0.5 tähendab 50% helitugevuse vähenemist ja väärtus 2 helitugevuse kahekordistumist.

Viivitus (Delay)

DelayNode loob viivitusefekti. See viivitab helisignaali määratud aja võrra.

Näide:

            const delayNode = audioContext.createDelay(2.0); // Maksimaalne viivitusaeg 2 sekundit
delayNode.delayTime.value = 0.5; // Määra viivitusajaks 0.5 sekundit
sourceNode.connect(delayNode);
delayNode.connect(audioContext.destination);
            

              
                Copy
              
            
          

Omadus delayTime.value kontrollib viivitusaega sekundites. Saate kasutada ka tagasisidet, et luua selgemini väljendunud viivitusefekt.

Kaja (Reverb)

ConvolverNode rakendab konvolutsiooniefekti, mida saab kasutada kaja loomiseks. ConvolverNode-i kasutamiseks on vaja impulsikoste faili (lühike helifail, mis esindab ruumi akustilisi omadusi). Kvaliteetseid impulsikosteid on saadaval internetis, sageli WAV-vormingus.

Näide:

            fetch('audio/impulse_response.wav')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    const convolverNode = audioContext.createConvolver();
    convolverNode.buffer = audioBuffer;
    sourceNode.connect(convolverNode);
    convolverNode.connect(audioContext.destination);
  })
  .catch(error => console.error('Impulsskoste laadimisel tekkis viga:', error));
            

              
                Copy
              
            
          

See kood laeb impulsikoste faili ('audio/impulse_response.wav'), loob ConvolverNode-i, määrab sellele impulsikoste ja ühendab selle signaaliteele. Erinevad impulsikosted toodavad erinevaid kajaefekte.

Filtrid

BiquadFilterNode rakendab erinevaid filtritüüpe, nagu madalpääs-, kõrgpääs-, ribapääsfilter ja palju muud. Filtreid saab kasutada helisignaali sagedussisu kujundamiseks.

Näide (madalpääsfiltri loomine):

            const filterNode = audioContext.createBiquadFilter();
filterNode.type = 'lowpass';
filterNode.frequency.value = 1000; // Lõikesagedus 1000 Hz juures
sourceNode.connect(filterNode);
filterNode.connect(audioContext.destination);
            

              
                Copy
              
            
          

Omadus type määrab filtri tüübi ja omadus frequency.value määrab lõikesageduse. Saate juhtida ka Q (resonants) ja gain omadusi, et filtri vastust veelgi kujundada.

Panoraamimine

StereoPannerNode võimaldab teil helisignaali panoraamida vasaku ja parema kanali vahel. See on kasulik ruumiliste efektide loomiseks.

Näide:

            const pannerNode = audioContext.createStereoPanner();
pannerNode.pan.value = 0.5; // Panoraami paremale (1 on täielikult paremal, -1 on täielikult vasakul)
sourceNode.connect(pannerNode);
pannerNode.connect(audioContext.destination);
            

              
                Copy
              
            
          

Omadus pan.value kontrollib panoraamimist. Väärtus -1 panoraamib heli täielikult vasakule, väärtus 1 panoraamib heli täielikult paremale ja väärtus 0 tsentreerib heli.

Heli sünteesimine

Ostsillaatorid

OscillatorNode genereerib perioodilisi lainekujusid, nagu siinus-, ruut-, saehammas- ja kolmnurklaineid. Ostsillaatoreid saab kasutada sünteesitud helide loomiseks.

Näide:

            const oscillatorNode = audioContext.createOscillator();
oscillatorNode.type = 'sine'; // Määra lainekuju tüüp
oscillatorNode.frequency.value = 440; // Määra sageduseks 440 Hz (A4)
oscillatorNode.connect(audioContext.destination);
oscillatorNode.start();
            

              
                Copy
              
            
          

Omadus type määrab lainekuju tüübi ja omadus frequency.value määrab sageduse hertsides. Saate ka kontrollida detune omadust sageduse peenhäälestamiseks.

Helikõverad (Envelopes)

Helikõveraid kasutatakse heli amplituudi kujundamiseks ajas. Levinud helikõvera tüüp on ADSR (Attack, Decay, Sustain, Release) helikõver. Kuigi Web Audio API-l ei ole sisseehitatud ADSR-sõlme, saate selle implementeerida kasutades GainNode-i ja automatiseerimist.

Näide (lihtsustatud ADSR, kasutades võimenduse automatiseerimist):

            function createADSR(gainNode, attack, decay, sustainLevel, release) {
  const now = audioContext.currentTime;

  // Attack
  gainNode.gain.setValueAtTime(0, now);
  gainNode.gain.linearRampToValueAtTime(1, now + attack);

  // Decay
  gainNode.gain.linearRampToValueAtTime(sustainLevel, now + attack + decay);

  // Release (käivitatakse hiljem funktsiooniga noteOff)
  return function noteOff() {
    const releaseTime = audioContext.currentTime;
    gainNode.gain.cancelScheduledValues(releaseTime);
    gainNode.gain.linearRampToValueAtTime(0, releaseTime + release);
  };
}

const oscillatorNode = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillatorNode.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillatorNode.start();

const noteOff = createADSR(gainNode, 0.1, 0.2, 0.5, 0.3); // Näidis ADSR väärtused

// ... Hiljem, kui noot vabastatakse:
// noteOff();

            

              
                Copy
              
            
          

See näide demonstreerib põhilist ADSR-implementatsiooni. See kasutab setValueAtTime ja linearRampToValueAtTime, et automatiseerida võimenduse väärtust ajas. Keerulisemad helikõvera implementatsioonid võivad sujuvamate üleminekute jaoks kasutada eksponentsiaalseid kõveraid.

Ruumiline heli ja 3D-heli

PannerNode ja AudioListener

Täiustatud ruumilise heli jaoks, eriti 3D-keskkondades, kasutage PannerNode-i. PannerNode võimaldab teil paigutada heliallika 3D-ruumi. AudioListener esindab kuulaja (teie kõrvade) asukohta ja orientatsiooni.

PannerNode-il on mitu omadust, mis kontrollivad selle käitumist:

• positionX, positionY, positionZ: Heliallika 3D-koordinaadid.
• orientationX, orientationY, orientationZ: Suund, kuhu heliallikas on suunatud.
• panningModel: Kasutatav panoraamimisalgoritm (nt 'equalpower', 'HRTF'). HRTF (Head-Related Transfer Function) pakub realistlikumat 3D-helikogemust.
• distanceModel: Kasutatav kauguse sumbumise mudel (nt 'linear', 'inverse', 'exponential').
• refDistance: Kauguse sumbumise võrdluskaugus.
• maxDistance: Kauguse sumbumise maksimaalne kaugus.
• rolloffFactor: Kauguse sumbumise langustegur.
• coneInnerAngle, coneOuterAngle, coneOuterGain: Parameetrid helikoonuse loomiseks (kasulik suunatud helide jaoks).

Näide (heliallika paigutamine 3D-ruumi):

            const pannerNode = audioContext.createPanner();
pannerNode.positionX.value = 2;
pannerNode.positionY.value = 0;
pannerNode.positionZ.value = -1;

sourceNode.connect(pannerNode);
pannerNode.connect(audioContext.destination);

// Kuulaja asukoha määramine (valikuline)
audioContext.listener.positionX.value = 0;
audioContext.listener.positionY.value = 0;
audioContext.listener.positionZ.value = 0;
            

              
                Copy
              
            
          

See kood paigutab heliallika koordinaatidele (2, 0, -1) ja kuulaja koordinaatidele (0, 0, 0). Nende väärtuste muutmine muudab heli tajutavat asukohta.

HRTF-panoraamimine

HRTF-panoraamimine kasutab peaga seotud ülekandefunktsioone (Head-Related Transfer Functions), et simuleerida, kuidas heli muutub kuulaja pea ja kõrvade kuju tõttu. See loob realistlikuma ja kaasahaaravama 3D-helikogemuse. HRTF-panoraamimise kasutamiseks seadke omadus panningModel väärtusele 'HRTF'.

Näide:

            const pannerNode = audioContext.createPanner();
pannerNode.panningModel = 'HRTF';
// ... ülejäänud kood panneri positsioneerimiseks ...
            

              
                Copy
              
            
          

HRTF-panoraamimine nõuab rohkem arvutusvõimsust kui 'equal power' panoraamimine, kuid pakub oluliselt paremat ruumilise heli kogemust.

Heli analüüsimine

AnalyserNode

AnalyserNode pakub reaalajas sagedus- ja ajadomeeni analüüsi helisignaalist. Seda saab kasutada heli visualiseerimiseks, helireaktiivsete efektide loomiseks või heli omaduste analüüsimiseks.

AnalyserNode-il on mitu omadust ja meetodit:

• fftSize: Kiire Fourier' teisenduse (FFT) suurus, mida kasutatakse sagedusanalüüsiks. Peab olema kahe aste (nt 32, 64, 128, 256, 512, 1024, 2048).
• frequencyBinCount: Pool fftSize-st. See on sagedusalade arv, mille tagastab getByteFrequencyData või getFloatFrequencyData.
• minDecibels, maxDecibels: Detsibellide väärtuste vahemik, mida kasutatakse sagedusanalüüsiks.
• smoothingTimeConstant: Sagedusandmetele ajas rakendatav silumistegur.
• getByteFrequencyData(array): Täidab Uint8Array sagedusandmetega (väärtused vahemikus 0 kuni 255).
• getByteTimeDomainData(array): Täidab Uint8Array ajadomeeni andmetega (lainekuju andmed, väärtused vahemikus 0 kuni 255).
• getFloatFrequencyData(array): Täidab Float32Array sagedusandmetega (detsibellide väärtused).
• getFloatTimeDomainData(array): Täidab Float32Array ajadomeeni andmetega (normaliseeritud väärtused vahemikus -1 kuni 1).

Näide (sagedusandmete visualiseerimine lõuendil):

            const analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 2048;
const bufferLength = analyserNode.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

sourceNode.connect(analyserNode);
analyserNode.connect(audioContext.destination);

function draw() {
  requestAnimationFrame(draw);

  analyserNode.getByteFrequencyData(dataArray);

  // Joonista sagedusandmed lõuendile
  canvasContext.fillStyle = 'rgb(0, 0, 0)';
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);

  const barWidth = (canvas.width / bufferLength) * 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasContext.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
    canvasContext.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
            

              
                Copy
              
            
          

See kood loob AnalyserNode-i, hangib sagedusandmed ja joonistab need lõuendile. Funktsiooni draw kutsutakse korduvalt, kasutades requestAnimationFrame-i, et luua reaalajas visualiseerimine.

Jõudluse optimeerimine

Audiotöötajad (Audio Workers)

Keerukate helitöötlusülesannete jaoks on sageli kasulik kasutada audiotöötajaid (Audio Workers). Audiotöötajad võimaldavad teil teostada helitöötlust eraldi lõimes, vältides pealõime blokeerimist ja parandades jõudlust.

Näide (audiotöötaja kasutamine):

            // Loo AudioWorkletNode
await audioContext.audioWorklet.addModule('my-audio-worker.js');
const myAudioWorkletNode = new AudioWorkletNode(audioContext, 'my-processor');

sourceNode.connect(myAudioWorkletNode);
myAudioWorkletNode.connect(audioContext.destination);

            

              
                Copy
              
            
          

Fail my-audio-worker.js sisaldab teie helitöötluse koodi. See defineerib AudioWorkletProcessor klassi, mis teostab heliandmete töötlemist.

Objektide kogumine (Object Pooling)

Helisõlmede sagedane loomine ja hävitamine võib olla kulukas. Objektide kogumine (Object pooling) on tehnika, kus te eelnevalt eraldate hulga helisõlmi ja taaskasutate neid uute loomise asemel. See võib oluliselt parandada jõudlust, eriti olukordades, kus peate sõlmi sageli looma ja hävitama (nt paljude lühikeste helide esitamisel).

Mälulekete vältimine

Heliressursside nõuetekohane haldamine on mälulekete vältimiseks hädavajalik. Veenduge, et ühendate lahti helisõlmed, mida enam ei vajata, ja vabastate kõik helipuhvrid, mida enam ei kasutata.

Täiustatud tehnikad

Modulatsioon

Modulatsioon on tehnika, kus üht helisignaali kasutatakse teise helisignaali parameetrite juhtimiseks. Seda saab kasutada mitmesuguste huvitavate heliefektide loomiseks, nagu tremolo, vibrato ja ringmodulatsioon.

Granulaarsüntees

Granulaarsüntees on tehnika, kus heli jaotatakse väikesteks segmentideks (teradeks) ja seejärel pannakse need erineval viisil uuesti kokku. Seda saab kasutada keerukate ja arenevate tekstuuride ning helimaastike loomiseks.

WebAssembly ja SIMD

Arvutusmahukate helitöötlusülesannete jaoks kaaluge WebAssembly (Wasm) ja SIMD (Single Instruction, Multiple Data) juhiste kasutamist. Wasm võimaldab teil käivitada kompileeritud koodi brauseris peaaegu natiivse kiirusega ja SIMD võimaldab teil teostada sama operatsiooni mitme andmepunktiga samaaegselt. See võib oluliselt parandada keerukate helialgoritmide jõudlust.

Parimad praktikad

• Kasutage ühtset nimekonventsiooni: See muudab teie koodi lihtsamini loetavaks ja mõistetavaks.
• Kommenteerige oma koodi: Selgitage, mida iga koodiosa teeb.
• Testige oma koodi põhjalikult: Testige erinevates brauserites ja seadmetes, et tagada ühilduvus.
• Optimeerige jõudlust: Kasutage jõudluse parandamiseks audiotöötajaid ja objektide kogumist.
• Käsitsege vigu sujuvalt: Püüdke kinni vead ja pakkuge informatiivseid veateateid.
• Kasutage hästi struktureeritud projekti korraldust: Hoidke oma helivarad koodist eraldi ja organiseerige oma kood loogilistesse moodulitesse.
• Kaaluge teegi kasutamist: Teegid nagu Tone.js, Howler.js ja Pizzicato.js võivad Web Audio API-ga töötamist lihtsustada. Need teegid pakuvad sageli kõrgema taseme abstraktsioone ja brauseriülest ühilduvust. Valige teek, mis sobib teie konkreetsetele vajadustele ja projekti nõuetele.

Brauseriteülene ühilduvus

Kuigi Web Audio API on laialdaselt toetatud, on siiski mõningaid brauseriteüleseid ühilduvusprobleeme, millest tuleks teadlik olla:

• Vanemad brauserid: Mõned vanemad brauserid võivad kasutada webkitAudioContext-i AudioContext-i asemel. Kasutage selle haldamiseks selle juhendi alguses olevat koodilõiku.
• Helifailivormingud: Erinevad brauserid toetavad erinevaid helifailivorminguid. MP3 ja WAV on üldiselt hästi toetatud, kuid ühilduvuse tagamiseks kaaluge mitme vormingu kasutamist.
• AudioContext-i olek: Mõnedes mobiilseadmetes võib AudioContext olla algselt peatatud ja vajada käivitamiseks kasutaja sekkumist (nt nupuvajutust).

Kokkuvõte

Web Audio API on võimas tööriist rikkalike ja interaktiivsete helikogemuste loomiseks veebimängudes ja interaktiivsetes rakendustes. Mõistes selles juhendis kirjeldatud põhimõisteid, praktilisi tehnikaid ja täiustatud funktsioone, saate rakendada Web Audio API täielikku potentsiaali ja luua oma projektidele professionaalse kvaliteediga heli. Katsetage, uurige ja ärge kartke nihutada veebiheli võimaluste piire!