Web-Audio-Änderungen in M36

Chris Wilson
Chris Wilson
X

Änderungen bei Web Audio

Bei Google lieben wir Standards. Wir arbeiten daran, die standardsbasierte Webplattform auszubauen. Eine der kleinen Unzulänglichkeiten war seit einiger Zeit die Implementierung der Web Audio API mit dem Präfix „webkit“ (insbesondere das webkitAudioContext-Objekt) und einige der eingestellten Web Audio-Funktionen, die wir weiterhin unterstützt haben.

Ursprünglich war geplant, dass die Unterstützung für das Präfix „webkit“ bei „AudioContext“ in Chrome 36 entfernt wird, da wir damit begonnen hatten, das AudioContext-Objekt ohne Präfix zu unterstützen. Das stellte sich als schwieriger heraus als erwartet. Daher unterstützt Chrome 36 sowohl die Variante ohne Präfix als auch die mit Präfix. Allerdings wurden auch im wieder eingeführten webkitAudioContext mehrere ältere Methoden und Attribute wie „createGainNode“ und „createJavaScriptNode“ entfernt. Kurz gesagt: In Chrome 36 sind webkitAudioContext und AudioContext Aliasse voneinander. Es gibt keine funktionalen Unterschiede zwischen den beiden.

Nach Chrome 36 wird die Unterstützung für das Präfix vollständig entfernt, wahrscheinlich in einigen Releases. Wir werden hier eine Ankündigung machen, wenn die Änderung bevorsteht. Außerdem wenden wir uns weiterhin an Entwickler, um sie auf die Notwendigkeit hinzuweisen, ihre Web Audio-Anwendungen zu korrigieren.

Warum haben wir das getan, anstatt zur vorherigen Implementierung zurückzukehren? Nun, wir waren teilweise zurückhaltend, zu weit zurückzukehren. Wir haben diese APIs bereits entfernt. Als angenehmer Nebeneffekt dieses Aliasings können Anwendungen dann auch in Firefox gut funktionieren, der in seiner Web Audio-Unterstützung, die ursprünglich im Herbst veröffentlicht wurde, nie ein AudioContext-Objekt mit Präfix unterstützt hat (und das auch zu Recht!).

Im Rest dieses Artikels erfahren Sie, wie Sie Probleme beheben, die aufgrund dieser Änderung in Ihrem Code auftreten können. Das Schöne an der Behebung dieser Probleme ist, dass Ihr Code dann sehr wahrscheinlich auch in Firefox funktioniert. (Ich hatte lange Zeit gedacht, dass meine Vocoder-Anwendung aufgrund der Firefox-Implementierung kaputt war, aber es stellte sich heraus, dass es eines dieser Probleme war!)

Wenn Sie schnell loslegen möchten, können Sie sich die Monkey-Patch-Bibliothek ansehen, die ich für Anwendungen geschrieben habe, die mit dem alten Web Audio-Code erstellt wurden. Damit können Sie in kürzester Zeit loslegen, da die Objekte und Methoden entsprechend aliasiert werden. Die in der Bibliothek aufgeführten Patches sind ein guter Leitfaden für die Änderungen.

In erster Linie

Alle Verweise auf window.webkitAudioContext sollten stattdessen auf window.AudioContext verweisen. Häufig lässt sich das Problem mit einer einfachen Maßnahme beheben:

window.AudioContext = window.AudioContext || window.webkitAudioContext;

Wenn Ihre App mit einer Meldung wie „Leider unterstützt Ihr Browser Web Audio nicht. Bitte verwenden Sie Chrome oder Safari.“ wird sehr wahrscheinlich explizit nach webkitAudioContext gesucht. Schlechter Entwickler! Sie hätten Firefox schon seit Monaten unterstützen können!

Es gibt jedoch noch einige andere, subtilere Codeentfernungen, von denen einige weniger offensichtlich sind.

  • Die BiquadFilter-Konstanten des enumerierten Typs für das .type-Attribut (das jetzt ein String ist) werden nicht mehr im BiquadFilterNode-Objekt angezeigt und werden auch nicht für das .type-Attribut unterstützt. Sie verwenden also nicht mehr .LOWPASS (oder 0), sondern legen „Lowpass“ fest.
  • Außerdem ist das Attribut Oscillator.type jetzt ein String-Typ – .SAWTOOTH gibt es nicht mehr.
  • PannerNode.type ist jetzt auch ein String-Aufzählungstyp.
  • PannerNode.distanceModel ist jetzt auch ein String-Aufzählungstyp.
  • createGainNode wurde in createGain umbenannt
  • createDelayNode wurde in createDelay umbenannt
  • createJavaScriptNode wurde in createScriptProcessor umbenannt
  • AudioBufferSourceNode.noteOn() wird jetzt durch start() ersetzt
  • AudioBufferSourceNode.noteGrainOn() wird jetzt auch durch start() ersetzt.
  • AudioBufferSourceNode.noteOff() wird in stop() umbenannt
  • OscillatorNode.noteOn() wird in start() umbenannt
  • OscillatorNode.noteOff() wird in stop() umbenannt
  • AudioParam.setTargetValueAtTime() wird in setTargetAtTime() umbenannt
  • AudioContext.createWaveTable() und OscillatorNode.setWaveTable() wurden in createPeriodicWave() andsetPeriodicWave()` umbenannt.
  • AudioBufferSourceNode.looping wurde zugunsten von .loop entfernt
  • AudioContext.createBuffer(ArrayBuffer, boolean) zum synchronen Dekodieren eines Blobs mit codierten Audiodaten wurde entfernt. Synchrone Aufrufe, die lange dauern, sind eine schlechte Programmierpraxis. Verwenden Sie stattdessen den asynchronen decodeAudioData-Aufruf. Das ist eine der schwierigeren Änderungen, da Sie den Logikfluss tatsächlich ändern müssen. Es ist jedoch eine weitaus bessere Praxis. Ehsan Angkari von Mozilla hat in seinem Beitrag zur Umstellung auf Web Audio ein schönes Beispiel dazu geschrieben.

Viele davon (z. B. die Umbenennung von „createGainNode“ und die Entfernung der synchronen Dekodierung in „createBuffer“) werden natürlich in der Konsole der Entwicklertools als Fehler angezeigt. Einige andere, z. B. diese Verwendung:

MULTI_LINE_CODE_PLACEHOLDER_1

wird nicht angezeigt und schlägt stillschweigend fehl. „myFilterNode.BANDPASS“ wird jetzt in „undefiniert“ aufgelöst und der Versuch, „.type“ auf „undefiniert“ festzulegen, hat keine Auswirkungen. Dies war übrigens der Grund für den Fehler des Vocoders.) Ebenso funktionierte es, wenn man „filter.type“ einfach einer Zahl zuwies:

myFilterNode.type = 2;

Jetzt müssen Sie jedoch die Stringaufzählung verwenden:

myFilterNode.type = “bandpass”;

Sie können also Ihren Code nach den folgenden Begriffen durchsuchen:

  • webkitAudioContext
  • .LOWPASS
  • .HIGHPASS
  • .BANDPASS
  • .LOWSHELF
  • .HIGHSHELF
  • .PEAKING
  • .NOTCH
  • .ALLPASS
  • .SINE
  • .SQUARE
  • .SAWTOOTH
  • .TRIANGLE
  • .noteOn
  • .noteGrainOn
  • .noteOff
  • .setWaveTable
  • .createWaveTable
  • .looping
  • .EQUALPOWER
  • .HRTF
  • .LINEAR
  • .INVERSE
  • .EXPONENTIAL
  • createGainNode
  • createDelayNode
  • .type (Ja, das führt zu vielen Fehlalarmen, ist aber die einzige Möglichkeit, das letzte Beispiel oben zu erfassen.)

Wenn Sie es eilig haben und schnell loslegen möchten, können Sie sich noch einmal eine Kopie meiner Monkeypatch-Bibliothek „webkitAudioContext“ herunterladen und in Ihre Anwendung einbinden. Viel Spaß beim Audio-Hacking!