Web-Audio-Änderungen in M36

Chris Wilson
Chris Wilson
Twitter

Web Audio-Änderungen

Bei Google lieben wir Standards. Wir haben es uns zur Aufgabe gemacht, eine standardisierte Webplattform aufzubauen. Einer der kleinen Warnhinweise dafür ist seit einiger Zeit die Implementierung des Web Audio APIs mit dem Präfix „webkit-“ (insbesondere das Objekt „webkitAudioContext“) sowie einige der veralteten Bits von Web Audio, die wir weiterhin unterstützen.

Ursprünglich war geplant, dass Chrome 36 die Unterstützung für das Präfix „webkitAudioContext“ einstellen würde, da wir bereits damit begonnen hatten, das AudioContext-Objekt ohne Präfix zu unterstützen. Dies erwies sich als problematischer als erwartet, sodass Chrome 36 sowohl ohne Präfix als auch mit Präfix unterstützt. Selbst im wieder eingeführten webkitAudioContext wurden jedoch einige ältere Methoden und Attribute wie createGainNode und createJavaScriptNode entfernt. Kurz gesagt: In Chrome 36 sind „webkitAudioContext“ und „AudioContext“ Aliasse. Es gibt keinen Unterschied in der Funktionalität der beiden.

Die Unterstützung für das Präfix wird nach Chrome 36 vollständig entfernt, wahrscheinlich in einigen Releases. Wir werden dies hier bekannt geben, wenn die Änderung bevorsteht, und wir wenden uns weiterhin an die Autoren, um die Probleme in ihren Web Audio-Anwendungen zu beheben.

Warum haben wir das gemacht, anstatt zur vorherigen Implementierung zurückzukehren? Nun, teilweise konnten wir nicht zu weit zurück gehen. Wir haben diese APIs bereits entfernt, und als positiver Nebeneffekt dieses Aliasing können Anwendungen dann problemlos in Firefox funktionieren, das noch nie ein AudioContext-Objekt mit dem Präfix unterstützt hat (und das stimmt auch!), in der Web Audio-Unterstützung, die im letzten Herbst veröffentlicht wurde.

Im weiteren Verlauf dieses Updates wird beschrieben, wie Sie Probleme beheben, die aufgrund dieser Änderung in Ihrem Code fehlerhaft sein könnten. Das Tolle an der Behebung dieser Probleme ist, dass Ihr Code dann höchstwahrscheinlich auch in Firefox funktioniert! (Ich dachte lange, meine Vocoder-Anwendung sei aufgrund der Implementierung von Firefox defekt, aber es stellte sich heraus, dass es eines dieser Probleme ist!)

Wenn Sie einfach loslegen möchten, können Sie sich auch eine Monkey-Patch-Bibliothek ansehen, die ich für Anwendungen geschrieben habe, die in den alten Web Audio-Code geschrieben wurden. Sie kann Ihnen dabei helfen, in kürzester Zeit einsatzbereit zu sein, da sie die Objekte und Methoden entsprechend versieht. Die Patches auf den Bibliothekslisten sind tatsächlich ein guter Leitfaden zu den Dingen, die sich geändert haben.

In erster Linie

Alle Verweise auf window.webkitAudioContext sollten stattdessen auf window.AudioContext verweisen. Häufig wurde dieses Problem folgendermaßen behoben:

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

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

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

  • Die Enum-Typkonstanten von BiquadFilter für das .type-Attribut (das jetzt ein String ist) werden nicht mehr für das BiquadFilterNode-Objekt angezeigt und werden auch nicht für das .type-Attribut unterstützt. Sie verwenden .LOWPASS (oder 0) also nicht mehr, sondern stellen den Wert auf „Lowpass“ ein.
  • Auch das Attribut Oscillator.type ist jetzt ein String-Enum-Typ – .SAWTOOTH ist nicht mehr vorhanden.
  • PannerNode.type ist jetzt auch ein String-Enum-Typ.
  • PannerNode.distanceModel ist jetzt auch ein String-Enum-Typ.
  • „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() wurde in stop() umbenannt
  • OscillatorNode.noteOn() wurde in start() umbenannt
  • OscillatorNode.noteOff() wurde in stop() umbenannt
  • AudioParam.setTargetValueAtTime() wurde in setTargetAtTime() umbenannt
  • AudioContext.createWaveTable() und OscillatorNode.setWaveTable() heißen jetzt createPeriodicWave() andsetPeriodicWave()`.
  • AudioBufferSourceNode.looping wurde zugunsten von .loop entfernt
  • AudioContext.createBuffer(ArrayBuffer, boolean) zum synchronen Decodieren eines Blobs codierter Audiodaten wurde entfernt. Synchrone Aufrufe, die lange dauern, sind schlechte Codierungspraktiken. Verwenden Sie stattdessen den asynchronen Aufruf decodeAudioData. Dies ist eine der anspruchsvolleren Änderungen – Sie müssen tatsächlich den Logikfluss ändern – aber eine weitaus bessere Übung. Ehsan Angkari von Mozilla hat in seinem Beitrag zur Konvertierung in Standard-Web-Audio ein schönes Beispiel dafür geschrieben.

Viele davon (wie die Umbenennung von createGainNode und das Entfernen der synchronen Decodierung in createBuffer) werden in der Entwicklertools-Konsole offensichtlich als Fehler angezeigt. Einige andere, wie z. B.:

MULTI_LINE_CODE_PLACEHOLDER_1

wird überhaupt nicht angezeigt und schlägt ohne Rückmeldung fehl (myFilterNode.BANDPASS wird nun in undefiniert aufgelöst und der Versuch, .type auf undefined zu setzen, hat keine Wirkung. Dies war übrigens der Grund, warum der Vocoder ausfiel.) Ebenso verhält es sich, wenn Sie einfach die Funktion filter.type einer Zahl zuweisen, die funktioniert:

myFilterNode.type = 2;

Jetzt müssen Sie jedoch die String-Aufzählung verwenden:

myFilterNode.type = “bandpass”;

Sie können Ihren Code daher für die folgenden Begriffe mit „grep“ verwenden:

  • 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, es wird viele falsch positive Ergebnisse geben, aber nur so kann das letzte Beispiel oben erkannt werden.)

Und wieder: Wenn Sie es eilig haben und direkt loslegen möchten, nehmen Sie einfach eine Kopie von my monkeypatch webkitAudioContext und fügen Sie sie in Ihre Anwendung ein. Viel Spaß beim Audio-Hacking!