M

MLOG

Čeština

Objevte sílu Web Audio API pro tvorbu pohlcujících zvukových zážitků ve webových hrách. Naučte se základy, praktické techniky a pokročilé funkce.

Herní zvuk: Komplexní průvodce Web Audio API

Web Audio API je výkonný systém pro ovládání zvuku na webu. Umožňuje vývojářům vytvářet komplexní grafy pro zpracování zvuku, což umožňuje bohaté a interaktivní zvukové zážitky ve webových hrách, interaktivních aplikacích a multimediálních projektech. Tento průvodce poskytuje komplexní přehled Web Audio API, pokrývající základní koncepty, praktické techniky a pokročilé funkce pro profesionální vývoj herního zvuku. Ať už jste zkušený zvukový inženýr nebo webový vývojář, který chce do svých projektů přidat zvuk, tento průvodce vás vybaví znalostmi a dovednostmi pro využití plného potenciálu Web Audio API.

Základy Web Audio API

AudioContext

Srdcem Web Audio API je AudioContext. Představte si ho jako zvukový engine – je to prostředí, kde se odehrává veškeré zpracování zvuku. Vytvoříte instanci AudioContext a poté jsou všechny vaše zvukové uzly (zdroje, efekty, cíle) propojeny v tomto kontextu.

Příklad:

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

Tento kód vytváří nový AudioContext s ohledem na kompatibilitu prohlížečů (některé starší prohlížeče mohou používat webkitAudioContext).

Zvukové uzly: Stavební kameny

Zvukové uzly jsou jednotlivé jednotky, které zpracovávají a manipulují se zvukem. Mohou to být zdroje zvuku (jako zvukové soubory nebo oscilátory), zvukové efekty (jako reverb nebo delay) nebo cíle (jako vaše reproduktory). Tyto uzly propojujete dohromady a vytváříte tak graf zpracování zvuku.

Mezi běžné typy zvukových uzlů patří:

Propojování zvukových uzlů

Metoda connect() se používá k propojování zvukových uzlů. Výstup jednoho uzlu je připojen ke vstupu druhého, čímž se vytváří signálová cesta.

Příklad:

sourceNode.connect(gainNode);
gainNode.connect(audioContext.destination); // Připojení k reproduktorům

Tento kód propojuje uzel zdroje zvuku s uzlem pro zesílení (gain) a poté propojuje uzel pro zesílení s cílem AudioContext (vaše reproduktory). Zvukový signál proudí ze zdroje, přes ovládání zesílení a poté na výstup.

Načítání a přehrávání zvuku

Získávání zvukových dat

Chcete-li přehrávat zvukové soubory, musíte nejprve získat zvuková data. To se obvykle provádí pomocí XMLHttpRequest nebo API fetch.

Příklad (pomocí fetch):

fetch('audio/mysound.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    // Zvuková data jsou nyní v audioBuffer
    // Můžete vytvořit AudioBufferSourceNode a přehrát ho
  })
  .catch(error => console.error('Chyba při načítání zvuku:', error));

Tento kód načte zvukový soubor ('audio/mysound.mp3'), dekóduje jej do AudioBuffer a zpracuje případné chyby. Ujistěte se, že váš server je nakonfigurován pro poskytování zvukových souborů se správným typem MIME (např. audio/mpeg pro MP3).

Vytvoření a přehrání AudioBufferSourceNode

Jakmile máte AudioBuffer, můžete vytvořit AudioBufferSourceNode a přiřadit mu buffer.

Příklad:

const sourceNode = audioContext.createBufferSource();
sourceNode.buffer = audioBuffer;
sourceNode.connect(audioContext.destination);
sourceNode.start(); // Spuštění přehrávání zvuku

Tento kód vytvoří AudioBufferSourceNode, přiřadí mu načtenou zvukovou vyrovnávací paměť, připojí jej k cíli AudioContext a spustí přehrávání zvuku. Metoda start() může přijmout volitelný časový parametr pro určení, kdy se má zvuk začít přehrávat (v sekundách od času spuštění audio kontextu).

Ovládání přehrávání

Přehrávání AudioBufferSourceNode můžete ovládat pomocí jeho vlastností a metod:

Příklad (přehrávání zvuku ve smyčce):

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

Tvorba zvukových efektů

Ovládání zesílení (hlasitost)

GainNode se používá k ovládání hlasitosti zvukového signálu. Můžete vytvořit GainNode a připojit jej do signálové cesty pro úpravu hlasitosti.

Příklad:

const gainNode = audioContext.createGain();
sourceNode.connect(gainNode);
gainNode.connect(audioContext.destination);
gainNode.gain.value = 0.5; // Nastavení zesílení na 50 %

Vlastnost gain.value ovládá faktor zesílení. Hodnota 1 představuje žádnou změnu hlasitosti, hodnota 0.5 představuje snížení hlasitosti o 50 % a hodnota 2 představuje zdvojnásobení hlasitosti.

Zpoždění (Delay)

DelayNode vytváří efekt zpoždění. Zpožďuje zvukový signál o zadanou dobu.

Příklad:

const delayNode = audioContext.createDelay(2.0); // Maximální čas zpoždění 2 sekundy
delayNode.delayTime.value = 0.5; // Nastavení času zpoždění na 0.5 sekundy
sourceNode.connect(delayNode);
delayNode.connect(audioContext.destination);

Vlastnost delayTime.value ovládá dobu zpoždění v sekundách. Můžete také použít zpětnou vazbu (feedback) k vytvoření výraznějšího efektu zpoždění.

Reverb (dozvuk)

ConvolverNode aplikuje konvoluční efekt, který lze použít k vytvoření reverbu. K použití ConvolverNode potřebujete soubor s impulzní odezvou (krátký zvukový soubor, který představuje akustické vlastnosti prostoru). Vysoce kvalitní impulzní odezvy jsou k dispozici online, často ve formátu WAV.

Příklad:

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('Chyba při načítání impulzní odezvy:', error));

Tento kód načte soubor s impulzní odezvou ('audio/impulse_response.wav'), vytvoří ConvolverNode, přiřadí mu impulzní odezvu a připojí jej do signálové cesty. Různé impulzní odezvy vytvoří různé reverb efekty.

Filtry

BiquadFilterNode implementuje různé typy filtrů, jako je dolní propust, horní propust, pásmová propust a další. Filtry lze použít k tvarování frekvenčního obsahu zvukového signálu.

Příklad (vytvoření dolnopropustného filtru):

const filterNode = audioContext.createBiquadFilter();
filterNode.type = 'lowpass';
filterNode.frequency.value = 1000; // Mezní frekvence na 1000 Hz
sourceNode.connect(filterNode);
filterNode.connect(audioContext.destination);

Vlastnost type určuje typ filtru a vlastnost frequency.value určuje mezní frekvenci. Můžete také ovládat vlastnosti Q (rezonance) a gain pro další tvarování odezvy filtru.

Panorámování (Panning)

StereoPannerNode umožňuje rozdělovat (panovat) zvukový signál mezi levý a pravý kanál. To je užitečné pro vytváření prostorových efektů.

Příklad:

const pannerNode = audioContext.createStereoPanner();
pannerNode.pan.value = 0.5; // Panorámování doprava (1 je plně vpravo, -1 je plně vlevo)
sourceNode.connect(pannerNode);
pannerNode.connect(audioContext.destination);

Vlastnost pan.value ovládá panorámování. Hodnota -1 posune zvuk zcela doleva, hodnota 1 posune zvuk zcela doprava a hodnota 0 zvuk vycentruje.

Syntéza zvuku

Oscilátory

OscillatorNode generuje periodické vlnové průběhy, jako jsou sinusové, obdélníkové, pilové a trojúhelníkové vlny. Oscilátory lze použít k vytváření syntetizovaných zvuků.

Příklad:

const oscillatorNode = audioContext.createOscillator();
oscillatorNode.type = 'sine'; // Nastavení typu vlnového průběhu
oscillatorNode.frequency.value = 440; // Nastavení frekvence na 440 Hz (A4)
oscillatorNode.connect(audioContext.destination);
oscillatorNode.start();

Vlastnost type určuje typ vlnového průběhu a vlastnost frequency.value určuje frekvenci v Hertzech. Můžete také ovládat vlastnost detune pro jemné doladění frekvence.

Obálky (Envelopes)

Obálky se používají k tvarování amplitudy zvuku v čase. Běžným typem obálky je obálka ADSR (Attack, Decay, Sustain, Release). Ačkoli Web Audio API nemá vestavěný uzel ADSR, můžete jej implementovat pomocí GainNode a automatizace.

Příklad (zjednodušené ADSR pomocí automatizace zesílení):

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 (spouští se později funkcí 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); // Příklad hodnot ADSR

// ... Později, když je nota uvolněna:
// noteOff();

Tento příklad demonstruje základní implementaci ADSR. Používá setValueAtTime a linearRampToValueAtTime k automatizaci hodnoty zesílení v čase. Složitější implementace obálek mohou používat exponenciální křivky pro plynulejší přechody.

Prostorový zvuk a 3D zvuk

PannerNode a AudioListener

Pro pokročilejší prostorový zvuk, zejména ve 3D prostředích, použijte PannerNode. PannerNode umožňuje umístit zdroj zvuku do 3D prostoru. AudioListener představuje polohu a orientaci posluchače (vašich uší).

PannerNode má několik vlastností, které řídí jeho chování:

Příklad (umístění zdroje zvuku do 3D prostoru):

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

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

// Umístění posluchače (volitelné)
audioContext.listener.positionX.value = 0;
audioContext.listener.positionY.value = 0;
audioContext.listener.positionZ.value = 0;

Tento kód umisťuje zdroj zvuku na souřadnice (2, 0, -1) a posluchače na (0, 0, 0). Úpravou těchto hodnot se změní vnímaná poloha zvuku.

HRTF panorámování

HRTF panorámování používá Head-Related Transfer Functions k simulaci toho, jak je zvuk měněn tvarem hlavy a uší posluchače. To vytváří realističtější a pohlcující 3D zvukový zážitek. Chcete-li použít HRTF panorámování, nastavte vlastnost panningModel na 'HRTF'.

Příklad:

const pannerNode = audioContext.createPanner();
pannerNode.panningModel = 'HRTF';
// ... zbytek kódu pro umístění panneru ...

HRTF panorámování vyžaduje více výpočetního výkonu než panorámování 'equal power', ale poskytuje výrazně lepší prostorový zvukový zážitek.

Analýza zvuku

AnalyserNode

AnalyserNode poskytuje analýzu zvukového signálu v reálném čase ve frekvenční a časové doméně. Lze jej použít k vizualizaci zvuku, vytváření efektů reagujících na zvuk nebo k analýze charakteristik zvuku.

AnalyserNode má několik vlastností a metod:

Příklad (vizualizace frekvenčních dat pomocí canvasu):

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

  // Vykreslení frekvenčních dat na canvas
  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();

Tento kód vytvoří AnalyserNode, získá frekvenční data a vykreslí je na canvas. Funkce draw je opakovaně volána pomocí requestAnimationFrame k vytvoření vizualizace v reálném čase.

Optimalizace výkonu

Audio Workery

Pro složité úlohy zpracování zvuku je často výhodné použít Audio Workery. Audio Workery umožňují provádět zpracování zvuku v samostatném vlákně, čímž se zabrání blokování hlavního vlákna a zlepší se výkon.

Příklad (použití Audio Workeru):

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

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

Soubor my-audio-worker.js obsahuje kód pro vaše zpracování zvuku. Definuje třídu AudioWorkletProcessor, která provádí zpracování na zvukových datech.

Sdružování objektů (Object Pooling)

Časté vytváření a ničení zvukových uzlů může být náročné. Sdružování objektů je technika, při které předem alokujete sadu zvukových uzlů a znovu je používáte místo vytváření nových. To může výrazně zlepšit výkon, zejména v situacích, kdy potřebujete často vytvářet a ničit uzly (např. přehrávání mnoha krátkých zvuků).

Předcházení únikům paměti

Správná správa zvukových zdrojů je nezbytná, aby se předešlo únikům paměti. Ujistěte se, že odpojujete zvukové uzly, které již nepotřebujete, a uvolňujete všechny zvukové buffery, které se již nepoužívají.

Pokročilé techniky

Modulace

Modulace je technika, při které se jeden zvukový signál používá k ovládání parametrů jiného zvukového signálu. To lze použít k vytvoření široké škály zajímavých zvukových efektů, jako je tremolo, vibrato a kruhová modulace.

Granulární syntéza

Granulární syntéza je technika, při které je zvuk rozdělen na malé segmenty (grány) a poté znovu sestaven různými způsoby. To lze použít k vytvoření složitých a vyvíjejících se textur a zvukových krajin.

WebAssembly a SIMD

Pro výpočetně náročné úlohy zpracování zvuku zvažte použití WebAssembly (Wasm) a instrukcí SIMD (Single Instruction, Multiple Data). Wasm umožňuje spouštět zkompilovaný kód v prohlížeči téměř nativní rychlostí a SIMD umožňuje provádět stejnou operaci na více datových bodech současně. To může výrazně zlepšit výkon u složitých zvukových algoritmů.

Osvědčené postupy

Kompatibilita mezi prohlížeči

Ačkoli je Web Audio API široce podporováno, stále existují některé problémy s kompatibilitou mezi prohlížeči, na které je třeba pamatovat:

Závěr

Web Audio API je mocný nástroj pro vytváření bohatých a interaktivních zvukových zážitků ve webových hrách a interaktivních aplikacích. Pochopením základních konceptů, praktických technik a pokročilých funkcí popsaných v tomto průvodci můžete využít plný potenciál Web Audio API a vytvářet profesionální zvuk pro své projekty. Experimentujte, prozkoumávejte a nebojte se posouvat hranice toho, co je s webovým zvukem možné!