Benutzer:Hörnchen/Web Audio API
- 30min
- mittel
- Grundvoraussetzung:
Inhaltsverzeichnis
Web Audio API
Die Web Audio API ist eine moderne und leistungsstarke Schnittstelle, um Audio im Browser zu nutzen. Im Unterschied zum klassischen audio-Element oder zum Audio()-Objekt in JavaScript erlaubt sie es, Audioquellen präzise zu steuern, zu manipulieren und mit Effekten zu versehen. Dadurch lassen sich komplexe Signalwege („Audiographen“) aufbauen, ähnlich wie in einem Tonstudio.
Einstieg in die API
Ein typischer Anwendungsfall ist das Laden einer Audiodatei und deren Dekodierung in ein [[1]]. Dafür verwendet man meist die moderne Kombination aus fetch und `async/await`. So wird der Ladevorgang asynchron behandelt und blockiert nicht die Ausführung anderer Teile des Programms.
Praktische Umsetzung Web Audio API
Hier ist ein Beispiel wie die API eingesetzt werden könnte.
let audioContext = null;
let audioBuffer = null;
// AudioContext nur einmalig erzeugen
function getAudioContext() {
if (!audioContext) {
audioContext = new AudioContext();
}
return audioContext;
}
async function loadAudio() {
if (audioBuffer) return audioBuffer;
const audioCtx = getAudioContext();
const response = await fetch("sirene.wav");
const arrayBuffer = await response.arrayBuffer();
audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
return audioBuffer;
}
async function playSirene() {
const audioCtx = getAudioContext();
if (!audioBuffer)
await loadAudio();
if (audioCtx.state === "suspended")
await audioCtx.resume();
const source = audioCtx.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioCtx.destination);
source.start();
}
document.getElementById("playBtn").addEventListener("click", playSirene);
Das Beispiel zeigt die click-Behandlung für einen Button, die beim Drücken des Buttons die Datei sirene.wav lädt und abspielt. Beispiele im Web zeigen gelegentlich einen Fallback auf webkitAudioContext, was seit 2017 nicht mehr erforderlich ist. Um das Beispiel verstehen zu können, soll zunächst das Konzept des Web Audio API beschrieben werden.
AudioNodes
Das Web Audio API basiert auf einem Audiograph. Darunter versteht man ein Netz aus sogenannten AudioNodes, von denen jeder eine bestimmte Aufgabe im Audiograph erfüllt. Ein Audiograph enthält eine oder mehrere Audioquellen und leitet deren Audiodaten über Effekt- und Analyse-Nodes weiter zu einem Audioausgang.
Jeder AudioNode hat eine connect()-Methode, die es ermöglicht, einen seiner Ausgänge mit einem der Eingänge eines anderen AudioNode zu verbinden, ganz so, als hätten Sie ein Regal voller Geräte und Kabel von einem zum anderen ziehen. Und wie in der Wirklichkeit gibt es auch hier Geräte mit unterschiedlich vielen Kanälen. Das kann nur einer sein (Mono), zwei (Stereo), vier (Quadro) bis hin zu 7.1 8-Kanal Surround Sound. Wenn Sie versuchen, ein Mono-Gerät in einen 7.1-Verstärker zu stöpseln, kommt kein guter Klang heraus. Im Web Audio API ist es genauso, deshalb bietet es Ihnen AudioNodes, um Kanäle zu mixen oder zu splitten.
Die Erzeugung von AudioNodes und die Steuerung der Wiedergabe erfolgt mit Hilfe eines AudioContext-Objekts.
Eingangsquellen
Am Anfang eines Signalwegs stehen die Eingangsquellen (Source Nodes). Sie liefern die Audiodaten, die anschließend durch verschiedene Verarbeitungsschritte geleitet werden können. Die Web Audio API bietet dafür unterschiedliche Typen von Quellen: von synthetisch erzeugten Tönen über geladene Audiodateien bis hin zu Medienströmen aus `<audio>`-/`<video>`-Elementen oder Mikrofoneingaben.
