In den letzten Monaten hat sich die Web Audio API von WebKit als überzeugende Plattform für Spiele und Audioanwendungen im Web etabliert. Wenn sich Entwickler damit vertraut machen, höre ich immer wieder ähnliche Fragen. Mit diesem kurzen Update möchten wir einige der häufiger gestellten Fragen beantworten, um die Nutzung der Web Audio API zu vereinfachen.
F: Hilfe, ich kann keine Geräusche erzeugen!
A: Wenn Sie die Web Audio API noch nicht kennen, sehen Sie sich das Tutorial für den Einstieg oder Erics Rezept für die Audiowiedergabe basierend auf Nutzerinteraktionen an.
F: Wie viele Audio-Kontexte sollte ich haben?
A: Im Allgemeinen sollten Sie pro Seite ein AudioContext einfügen. Ein einzelner Audio-Kontext kann viele damit verbundene Knoten unterstützen. Sie können zwar mehrere AudioContexts auf einer einzelnen Seite einfügen, dies kann jedoch zu Leistungseinbußen führen.
F: Ich habe einen AudioBufferSourceNode, den ich gerade mit noteOn() abgespielt habe. Ich möchte ihn noch einmal abspielen, aber noteOn() bewirkt nichts. Was kann ich tun?
A: Sobald die Wiedergabe eines Quellknotens abgeschlossen ist, kann sie nicht mehr fortgesetzt werden. Wenn Sie den zugrunde liegenden Puffer noch einmal wiedergeben möchten, sollten Sie ein neues AudioBufferSourceNode erstellen und noteOn() aufrufen.
Das Neuerstellen des Quellknotens mag ineffizient erscheinen, aber Quellknoten sind für dieses Muster stark optimiert. Wenn Sie außerdem einen Handle für den AudioBuffer behalten, müssen Sie keine weitere Anfrage an das Asset senden, um denselben Sound noch einmal abzuspielen. Wenn Sie dieses Muster wiederholen müssen, kapseln Sie die Wiedergabe mit einer einfachen Hilfsfunktion wie playSound(buffer).
F: Warum muss ich bei der Wiedergabe eines Sounds jedes Mal einen neuen Quellknoten erstellen?
A: Bei dieser Architektur wird das Audio-Asset vom Wiedergabestatus entkoppelt. Wenn wir einen Plattenspieler als Analogie verwenden, sind Puffer mit Schallplatten und Quellen mit Tonköpfen vergleichbar. Da in vielen Anwendungen mehrere Versionen desselben Puffers gleichzeitig wiedergegeben werden, ist dieses Muster unerlässlich.
F: Wie kann ich Audio aus audio- und video-Tags verarbeiten?
A: MediaElementAudioSourceNode ist in Arbeit. Wenn verfügbar, funktioniert es ungefähr so (Hinzufügen eines Filtereffekts zu einem Sample, das über das Audio-Tag wiedergegeben wird):
<audio src="sounds/sample.wav" controls>
var audioElement = document.querySelector('audio');
var mediaSourceNode = context.createMediaElementSource(audioElement);
mediaSourceNode.connect(filter);
filter.connect(context.destination);
Diese Funktion wird in diesem crbug verfolgt. In dieser Konfiguration ist kein Aufruf von mediaSourceNode.noteOn() erforderlich, da die Wiedergabe über das Audio-Tag gesteuert wird.
F: Wann kann ich Ton von einem Mikrofon erhalten?
A: Der Audioeingabeteil wird als Teil von WebRTC mit getUserMedia implementiert und als spezieller Quellknoten in der Web Audio API verfügbar sein. Es funktioniert in Verbindung mit createMediaElementSource.
F: Wie kann ich prüfen, wann eine AudioSourceNode abgespielt wurde?
A: Derzeit müssen Sie einen JavaScript-Timer verwenden, da die Web Audio API diese Funktion nicht unterstützt. Das folgende Snippet aus dem Tutorial „Erste Schritte mit der Web Audio API“ ist ein Beispiel dafür:
// Assume source and buffer are previously defined.
source.noteOn(0);
var timer = setTimeout(function() {
console.log('playback finished');
}, buffer.duration * 1000);
Es gibt einen offenen Fehler, der die Implementierung eines genaueren Rückrufs in der Web Audio API betrifft.
F: Das Laden von Sounds führt dazu, dass der gesamte UI-Thread blockiert wird und die Benutzeroberfläche nicht mehr reagiert. Hilfe!**
A: Verwenden Sie die decodeAudioData API für das asynchrone Laden, um eine Blockierung des Hauptthreads zu vermeiden. Beispiel ansehen
F: Kann die Web Audio API verwendet werden, um Sounds schneller als in Echtzeit zu verarbeiten?
A: Ja, wir arbeiten an einer Lösung. Bleiben Sie dran!
F: Ich habe eine tolle Web Audio API-Anwendung erstellt, aber wenn der Tab, auf dem sie ausgeführt wird, in den Hintergrund wechselt, klingen die Sounds ganz komisch.
A: Das liegt wahrscheinlich daran, dass Sie setTimeouts verwenden. Diese funktionieren anders, wenn die Seite im Hintergrund ausgeführt wird. In Zukunft kann die Web Audio API zu bestimmten Zeiten über den internen Timer (context.currentTime-Attribut) der Web Audio API zurückgerufen werden. Weitere Informationen finden Sie in diesem Feature Request.
Im Allgemeinen ist es sinnvoll, die Wiedergabe zu beenden, wenn Ihre App in den Hintergrund wechselt. Mit der Page Visibility API können Sie erkennen, wenn eine Seite in den Hintergrund verschoben wird.
F: Wie kann ich die Tonhöhe eines Sounds mit der Web Audio API ändern?
A: Ändern Sie die playbackRate für den Quellknoten.
F: Kann ich die Tonhöhe ändern, ohne die Geschwindigkeit zu ändern?
A: Die Web Audio API könnte einen PitchNode im Audio-Kontext haben, aber das ist schwer zu implementieren. Das liegt daran, dass es in der Audio-Community keinen einfachen Algorithmus für die Tonhöhenverschiebung gibt. Bekannte Techniken erzeugen Artefakte, insbesondere bei großen Tonhöhenverschiebungen. Es gibt zwei Arten von Ansätzen, um dieses Problem zu lösen:
- Zeitbereichsalgorithmen, die wiederholte Segment-Echo-Artefakte verursachen.
- Techniken im Frequenzbereich, die zu Artefakten durch Nachhall führen.
Es gibt zwar keinen nativen Knoten für diese Techniken, aber Sie können sie mit einem JavaScriptAudioNode ausführen. Dieses Code-Snippet kann als Ausgangspunkt dienen.
F: Wie kann ich einen AudioContext mit einer Abtastrate meiner Wahl erstellen?
A: Derzeit wird das nicht unterstützt, aber wir arbeiten daran. Siehe diesen Feature Request.
Wenn Sie weitere Fragen haben, können Sie sie auf Stack Overflow mit dem Tag web-audio stellen.