Zum Inhalt springen

„Web Audio API“ – Versionsunterschied

aus Wikipedia, der freien Enzyklopädie
Versionsgeschichte interaktiv durchsuchen
[gesichtete Version][gesichtete Version]
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Inhalt gelöscht Inhalt hinzugefügt
VisuellWikitext
S3154123 (Diskussion | Beiträge)
37 Bearbeitungen
K doppeltes Wort gelöscht
K MDN Web Docs
Zeile 2: Zeile 2:


== Funktionsweise ==
== Funktionsweise ==
Audiosignale werden durch einen mittels Programmcode spezifizierten [[Graph (Graphentheorie)|Graph]]en (AudioContext) geleitet, in dem jeder Knoten (AudioNode) einen Bearbeitungsschritt repräsentiert und mit anderen Knoten verbunden ist. Es gibt einen Ausgabeknoten, der die Daten je nach Art des Kontexts an die Audioausgabe des Systems, also beispielsweise den [[Lautsprecher]] weiterleitet oder als Binärdaten speichert. Eingabeknoten können ein Audiosignal durch einen [[Oszillator]] produzieren oder diese aus anderen Quellen beziehen. Dies können Audiodateien sein, ein angeschlossenes Mikrofon oder [[WebRTC]]-Verbindungen. Schließlich gibt es Knoten, die Audiosignale bearbeiten. Hier reicht die Palette von einfachen Manipulationen der Lautstärke über die Anwendung verschiedener [[Filter (Elektrotechnik)|Filter]] bis hin zur Möglichkeit, den [[Raumklang]] (einschließlich [[Doppler-Effekt]]) für beliebige Positionen und Bewegungen des Zuhörers neu zu berechnen.<ref>{{Internetquelle|url=https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Web_audio_spatialization_basics|titel=Web audio spatialization basics|autor=|hrsg=|werk=[[Mozilla Developer Network]]|datum=|sprache=en|zugriff=2016-09-05}}</ref> [[Mehrkanal-Tonsystem|Mehrere Tonkanäle]] werden dabei automatisch angepasst, sofern Quelle und Ziel unterschiedliche Anordnungen verwenden, sie können aber auch über eigene Knoten bearbeitet werden. Es gibt auch Knoten, die das Audiosignal unverändert lassen, aber zur Analyse eine [[schnelle Fourier-Transformation]] durchführen.<ref>{{Internetquelle|url=https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API|titel=Visualizations with Web Audio API|autor=|hrsg=|werk=[[Mozilla Developer Network]]|datum=|sprache=en|zugriff=2016-09-05}}</ref> Bei der Verknüpfung der Knoten sind Schleifen zulässig, sofern einer der enthaltenen Knoten die Ausgabe verzögert. Die Knoten besitzen Parameter, die das genaue Verhalten beschreiben und während der Verarbeitung auch geändert werden können.
Audiosignale werden durch einen mittels Programmcode spezifizierten [[Graph (Graphentheorie)|Graph]]en (AudioContext) geleitet, in dem jeder Knoten (AudioNode) einen Bearbeitungsschritt repräsentiert und mit anderen Knoten verbunden ist. Es gibt einen Ausgabeknoten, der die Daten je nach Art des Kontexts an die Audioausgabe des Systems, also beispielsweise den [[Lautsprecher]] weiterleitet oder als Binärdaten speichert. Eingabeknoten können ein Audiosignal durch einen [[Oszillator]] produzieren oder diese aus anderen Quellen beziehen. Dies können Audiodateien sein, ein angeschlossenes Mikrofon oder [[WebRTC]]-Verbindungen. Schließlich gibt es Knoten, die Audiosignale bearbeiten. Hier reicht die Palette von einfachen Manipulationen der Lautstärke über die Anwendung verschiedener [[Filter (Elektrotechnik)|Filter]] bis hin zur Möglichkeit, den [[Raumklang]] (einschließlich [[Doppler-Effekt]]) für beliebige Positionen und Bewegungen des Zuhörers neu zu berechnen.<ref>{{Internetquelle|url=https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Web_audio_spatialization_basics|titel=Web audio spatialization basics|autor=|hrsg=|werk=[[MDN Web Docs]]|datum=|sprache=en|zugriff=2016-09-05}}</ref> [[Mehrkanal-Tonsystem|Mehrere Tonkanäle]] werden dabei automatisch angepasst, sofern Quelle und Ziel unterschiedliche Anordnungen verwenden, sie können aber auch über eigene Knoten bearbeitet werden. Es gibt auch Knoten, die das Audiosignal unverändert lassen, aber zur Analyse eine [[schnelle Fourier-Transformation]] durchführen.<ref>{{Internetquelle|url=https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API|titel=Visualizations with Web Audio API|autor=|hrsg=|werk=[[MDN Web Docs]]|datum=|sprache=en|zugriff=2016-09-05}}</ref> Bei der Verknüpfung der Knoten sind Schleifen zulässig, sofern einer der enthaltenen Knoten die Ausgabe verzögert. Die Knoten besitzen Parameter, die das genaue Verhalten beschreiben und während der Verarbeitung auch geändert werden können.


Die eigentliche Signalverarbeitung findet hauptsächlich in der zugrundeliegenden Implementation der API statt, jedoch ist auch direkte Bearbeitung in JavaScript möglich.<ref>{{cite web | url=https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html | title=Web Audio API |author=Chris Rogers |date=2012-03-15 |publisher=[[W3C]] |archiveurl=http://www.w3.org/TR/2012/WD-webaudio-20120315/ |archivedate=2012-03-15 |accessdate=2012-07-04}}</ref>
Die eigentliche Signalverarbeitung findet hauptsächlich in der zugrundeliegenden Implementation der API statt, jedoch ist auch direkte Bearbeitung in JavaScript möglich.<ref>{{cite web | url=https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html | title=Web Audio API |author=Chris Rogers |date=2012-03-15 |publisher=[[W3C]] |archiveurl=http://www.w3.org/TR/2012/WD-webaudio-20120315/ |archivedate=2012-03-15 |accessdate=2012-07-04}}</ref>
Zeile 8: Zeile 8:
== Beispiel ==
== Beispiel ==
[[Datei:Web-audio-api-firefox-debug.png|mini|hochkant=2|Grafische Darstellung der AudioNodes des Beispiels in der [[Entwicklerwerkzeuge in Webbrowsern|Debug-Ansicht]] in Firefox|alternativtext=Gezeigt werden drei Rechtecke, beschriftet mit "Oscillator", "Gain" und "AudioDestination" und in dieser Reihenfolge durch Pfeile verbunden. Das erste Rechteck ist ausgewählt, in der rechten Hälfte sind seine Eigenschaften eingeblendet: "type: sine, frequency: 2500, detune: 0".]]
[[Datei:Web-audio-api-firefox-debug.png|mini|hochkant=2|Grafische Darstellung der AudioNodes des Beispiels in der [[Entwicklerwerkzeuge in Webbrowsern|Debug-Ansicht]] in Firefox|alternativtext=Gezeigt werden drei Rechtecke, beschriftet mit "Oscillator", "Gain" und "AudioDestination" und in dieser Reihenfolge durch Pfeile verbunden. Das erste Rechteck ist ausgewählt, in der rechten Hälfte sind seine Eigenschaften eingeblendet: "type: sine, frequency: 2500, detune: 0".]]
Das folgende Beispiel erzeugt einen [[Sinuston]].<ref>{{Internetquelle|url=https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Using_Web_Audio_API|titel=Using the Web Audio API|autor=|hrsg=|werk=[[Mozilla Developer Network]]|datum=|sprache=en|zugriff=2016-09-05}}</ref>
Das folgende Beispiel erzeugt einen [[Sinuston]].<ref>{{Internetquelle|url=https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Using_Web_Audio_API|titel=Using the Web Audio API|autor=|hrsg=|werk=[[MDN Web Docs]]|datum=|sprache=en|zugriff=2016-09-05}}</ref>
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
//AudioContext erzeugen
//AudioContext erzeugen
Zeile 35: Zeile 35:
Die Web Audio API wird von allen wichtigen aktuellen Browsern unterstützt: [[Mozilla Firefox]] ab Version 25, [[Google Chrome]] ab Version 14 (bis Version 33 nur mit <code>webkit</code>-[[Herstellerpräfix|Präfix]]), [[Microsoft Edge]], [[Opera (Browser)|Opera]] ab Version 15 (ab Version 22 ohne Präfix) und [[Apple Safari|Safari]] ab Version 6 (mit Präfix). Auch die meisten mobilen Browser unterstützen die API.<ref>{{Internetquelle|url=http://caniuse.com/#feat=audio-api|titel=Can I use: Web Audio API|autor=|hrsg=|werk=|datum=|sprache=|zugriff=2016-09-05}}</ref><ref>{{Internetquelle|url=https://www.chromestatus.com/feature/6261718720184320|titel=Unprefixed Web Audio API - Chrome Platform Status|autor=|hrsg=|werk=|datum=|sprache=|zugriff=2016-09-05}}</ref>
Die Web Audio API wird von allen wichtigen aktuellen Browsern unterstützt: [[Mozilla Firefox]] ab Version 25, [[Google Chrome]] ab Version 14 (bis Version 33 nur mit <code>webkit</code>-[[Herstellerpräfix|Präfix]]), [[Microsoft Edge]], [[Opera (Browser)|Opera]] ab Version 15 (ab Version 22 ohne Präfix) und [[Apple Safari|Safari]] ab Version 6 (mit Präfix). Auch die meisten mobilen Browser unterstützen die API.<ref>{{Internetquelle|url=http://caniuse.com/#feat=audio-api|titel=Can I use: Web Audio API|autor=|hrsg=|werk=|datum=|sprache=|zugriff=2016-09-05}}</ref><ref>{{Internetquelle|url=https://www.chromestatus.com/feature/6261718720184320|titel=Unprefixed Web Audio API - Chrome Platform Status|autor=|hrsg=|werk=|datum=|sprache=|zugriff=2016-09-05}}</ref>


Da sich die Spezifikation aber noch in Entwicklung befindet, variiert der Grad der Unterstützung zwischen den verschiedenen Browsern und zwischen unterschiedlichen Version der Browser. Ebenfalls unterschiedlich ist die [[Rechenleistung|Performance]]<ref>{{Internetquelle|url=https://hacks.mozilla.org/2016/08/whats-new-in-web-audio-2/|titel=What’s new in Web Audio?|autor=Soledad Penadés|hrsg=|werk=Mozilla Hacks|datum=2016-08-15|sprache=en|zugriff=2016-09-05}}</ref> und die [[Debugger|Debugging]]-Möglichkeiten.<ref>{{Internetquelle|url=https://developer.mozilla.org/en-US/docs/Tools/Web_Audio_Editor|titel=Web Audio Editor|autor=|hrsg=|werk=[[Mozilla Developer Network]]|datum=|sprache=en|zugriff=2016-09-05}}</ref>
Da sich die Spezifikation aber noch in Entwicklung befindet, variiert der Grad der Unterstützung zwischen den verschiedenen Browsern und zwischen unterschiedlichen Version der Browser. Ebenfalls unterschiedlich ist die [[Rechenleistung|Performance]]<ref>{{Internetquelle|url=https://hacks.mozilla.org/2016/08/whats-new-in-web-audio-2/|titel=What’s new in Web Audio?|autor=Soledad Penadés|hrsg=|werk=Mozilla Hacks|datum=2016-08-15|sprache=en|zugriff=2016-09-05}}</ref> und die [[Debugger|Debugging]]-Möglichkeiten.<ref>{{Internetquelle|url=https://developer.mozilla.org/en-US/docs/Tools/Web_Audio_Editor|titel=Web Audio Editor|autor=|hrsg=|werk=[[MDN Web Docs]]|datum=|sprache=en|zugriff=2016-09-05}}</ref>


Für ältere Browser gibt es [[Polyfill]]s, die über [[Adobe Flash|Flash]] oder eine ältere API in Firefox funktionieren.<ref>{{Internetquelle|url=https://github.com/g200kg/WAAPISim|titel=WAAPISim|autor=g200kg|hrsg=|werk=[[GitHub]]|datum=|sprache=|zugriff=2016-09-06}}</ref>
Für ältere Browser gibt es [[Polyfill]]s, die über [[Adobe Flash|Flash]] oder eine ältere API in Firefox funktionieren.<ref>{{Internetquelle|url=https://github.com/g200kg/WAAPISim|titel=WAAPISim|autor=g200kg|hrsg=|werk=[[GitHub]]|datum=|sprache=|zugriff=2016-09-06}}</ref>
Zeile 44: Zeile 44:
== Weblinks ==
== Weblinks ==
* [https://www.w3.org/TR/webaudio/ Spezifikation]
* [https://www.w3.org/TR/webaudio/ Spezifikation]
* [https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API]
* [https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API] auf [[MDN Web Docs]]
* [https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Using_Web_Audio_API Using Web Audio API]
* [https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Using_Web_Audio_API Using Web Audio API] auf MDN Web Docs
* [https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API Basic concepts behind Web Audio API]
* [https://developer.mozilla.org/en-US/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API Basic concepts behind Web Audio API] auf MDN Web Docs


[[Kategorie:Tonbearbeitung]]
[[Kategorie:Tonbearbeitung]]

Version vom 31. Januar 2021, 12:47 Uhr

Die Web Audio API ist eine in JavaScript verfasste API zum Erzeugen und Bearbeiten von Audiosignalen in Webapplikationen. Der Standard wird von einer Arbeitsgruppe des W3C entwickelt und kommt beispielsweise in Browserspielen zum Einsatz. Sie kann als Audio-Analogon zum Canvas-Element gesehen werden.

Funktionsweise

Audiosignale werden durch einen mittels Programmcode spezifizierten Graphen (AudioContext) geleitet, in dem jeder Knoten (AudioNode) einen Bearbeitungsschritt repräsentiert und mit anderen Knoten verbunden ist. Es gibt einen Ausgabeknoten, der die Daten je nach Art des Kontexts an die Audioausgabe des Systems, also beispielsweise den Lautsprecher weiterleitet oder als Binärdaten speichert. Eingabeknoten können ein Audiosignal durch einen Oszillator produzieren oder diese aus anderen Quellen beziehen. Dies können Audiodateien sein, ein angeschlossenes Mikrofon oder WebRTC-Verbindungen. Schließlich gibt es Knoten, die Audiosignale bearbeiten. Hier reicht die Palette von einfachen Manipulationen der Lautstärke über die Anwendung verschiedener Filter bis hin zur Möglichkeit, den Raumklang (einschließlich Doppler-Effekt) für beliebige Positionen und Bewegungen des Zuhörers neu zu berechnen.[1] Mehrere Tonkanäle werden dabei automatisch angepasst, sofern Quelle und Ziel unterschiedliche Anordnungen verwenden, sie können aber auch über eigene Knoten bearbeitet werden. Es gibt auch Knoten, die das Audiosignal unverändert lassen, aber zur Analyse eine schnelle Fourier-Transformation durchführen.[2] Bei der Verknüpfung der Knoten sind Schleifen zulässig, sofern einer der enthaltenen Knoten die Ausgabe verzögert. Die Knoten besitzen Parameter, die das genaue Verhalten beschreiben und während der Verarbeitung auch geändert werden können.

Die eigentliche Signalverarbeitung findet hauptsächlich in der zugrundeliegenden Implementation der API statt, jedoch ist auch direkte Bearbeitung in JavaScript möglich.[3]

Beispiel

Gezeigt werden drei Rechtecke, beschriftet mit "Oscillator", "Gain" und "AudioDestination" und in dieser Reihenfolge durch Pfeile verbunden. Das erste Rechteck ist ausgewählt, in der rechten Hälfte sind seine Eigenschaften eingeblendet: "type: sine, frequency: 2500, detune: 0".
Grafische Darstellung der AudioNodes des Beispiels in der Debug-Ansicht in Firefox

Das folgende Beispiel erzeugt einen Sinuston.[4] 

//AudioContext erzeugen
var audioCtx = new AudioContext();

//AudioNodes erzeugen
var oscillatorNode = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

//AudioNodes verbinden
oscillatorNode.connect(gainNode);
gainNode.connect(audioCtx.destination);

//AudioNodes konfigurieren
oscillatorNode.type = 'sine';
oscillatorNode.frequency.value = 2500;
gainNode.gain.value = 0.5;

//Ausgabe starten
oscillatorNode.start();

Durch eine dynamische Anpassung von oscillatorNode.frequency.value (der Frequenz in Hertz) und gainNode.gain.value (der relativen Lautstärke) können so einfache Melodien erzeugt werden.

Browserunterstützung

Die Web Audio API wird von allen wichtigen aktuellen Browsern unterstützt: Mozilla Firefox ab Version 25, Google Chrome ab Version 14 (bis Version 33 nur mit webkit-Präfix), Microsoft Edge, Opera ab Version 15 (ab Version 22 ohne Präfix) und Safari ab Version 6 (mit Präfix). Auch die meisten mobilen Browser unterstützen die API.[5][6]

Da sich die Spezifikation aber noch in Entwicklung befindet, variiert der Grad der Unterstützung zwischen den verschiedenen Browsern und zwischen unterschiedlichen Version der Browser. Ebenfalls unterschiedlich ist die Performance[7] und die Debugging-Möglichkeiten.[8]

Für ältere Browser gibt es Polyfills, die über Flash oder eine ältere API in Firefox funktionieren.[9]

Einzelnachweise

  1. ↑ Web audio spatialization basics. In: MDN Web Docs. Abgerufen am 5. September 2016 (englisch).
  2. ↑ Visualizations with Web Audio API. In: MDN Web Docs. Abgerufen am 5. September 2016 (englisch).
  3. ↑ Chris Rogers: Web Audio API. W3C, 15. März 2012, archiviert vom Original am 15. März 2012; abgerufen am 4. Juli 2012.
  4. ↑ Using the Web Audio API. In: MDN Web Docs. Abgerufen am 5. September 2016 (englisch).
  5. ↑ Can I use: Web Audio API. Abgerufen am 5. September 2016.
  6. ↑ Unprefixed Web Audio API - Chrome Platform Status. Abgerufen am 5. September 2016.
  7. ↑ Soledad Penadés: What’s new in Web Audio? In: Mozilla Hacks. 15. August 2016, abgerufen am 5. September 2016 (englisch).
  8. ↑ Web Audio Editor. In: MDN Web Docs. Abgerufen am 5. September 2016 (englisch).
  9. ↑ g200kg: WAAPISim. In: GitHub. Abgerufen am 6. September 2016.
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Web_Audio_API&oldid=208276037“