M36 でのウェブ オーディオの変更

Chris Wilson 氏
Chris Wilson

ウェブオーディオの変更

Google では標準を重視しています。Google は、標準で定義されたウェブ プラットフォームを構築するという使命を負っています。以前から指摘されていた、Web Audio API の Webkit プレフィックス実装(特に webkitAudioContext オブジェクト)と、Google がサポートし続けてきたウェブ オーディオの非推奨の一部があります。

もともと、Chrome 36 で接頭辞 webkitAudioContext のサポートが削除されるのは、接頭辞のない AudioContext オブジェクトのサポートを開始していたためです。これは想定以上に面倒なものであることが判明したため、Chrome 36 ではプレフィックスなしとプレフィックスありの両方をサポートしています。ただし、再導入された webkitAudioContext でも、createRangeNode や createJavaScriptNode などの以前のメソッドと属性がいくつか削除されています。つまり、Chrome 36 では webkitAudioContext と AudioContext は互いにエイリアスであり、機能に違いはありません。

このプレフィックスのサポートは、Chrome 36 以降(おそらく今後のリリース)で完全に削除される予定です。変更が適用される際は、こちらでお知らせいたします。また、ウェブ オーディオ アプリケーションの修正については、引き続き作成者の皆様にご連絡する予定です。

以前の実装に戻すのではなく、このように変更したのはなぜですか?その点、Google はあまり後戻りをしたわけではありません。すでに API を削除しました。このエイリアシングの好ましい副作用として、アプリケーションは、昨年秋にリリースした Web Audio サポートでプレフィックス AudioContext オブジェクトをサポートしたことがありませんでした。Firefox でも問題なく動作しています。

この更新の残りの部分では、この変更によりコードが機能しない部分を修正するガイドを提供します。これらの問題を修正できる素晴らしいことは、作成したコードが Firefox でも正常に動作する可能性が高いことです。(Firefox の実装が原因で Vocoder アプリケーションが機能しなくなると長い間考えていましたが、問題の一つであることが判明しました)。

起動して実行したい場合は、古いウェブ オーディオ コードで記述されたアプリケーション用に私が作成した monkey-patch ライブラリをご覧ください。これにより、オブジェクトとメソッドが適切にエイリアスされるため、最小限の時間で起動して実行できます。実際、ライブラリにリストされているパッチは、変更された点を知るための優れたガイドです。

何よりも

window.webkitAudioContext への参照は、代わりに window.AudioContext にする必要があります。多くの場合、この問題は次のような簡単な手順で解決できます。

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

アプリから「お使いのブラウザはウェブオーディオに対応していません。Chrome か Safari を使用してください。」というエラー メッセージが表示された場合、webkitAudioContext を明示的に検索している可能性が高いと考えられます。なんてこった!何ヶ月も Firefox を応援してくれるかもしれません。

ただし、より細かなコードの削除が他にいくつかあり、その一部は明確ではありません。

  • .type 属性(現在は文字列)の BiquadFilter 列挙型定数が BiquadFilterNode オブジェクトに表示されなくなり、.type 属性でもサポートされなくなりました。したがって、.LOWPASS(または 0)はもう使用しません。「lowpass」に設定します。
  • また、Oscillator.type 属性も同様に文字列列挙型になり、.SAWTOOTH ではなくなりました。
  • PannerNode.type は文字列列挙型になりました。
  • PannerNode.distanceModel は文字列列挙型になりました。
  • createGainNode の名前を createGain に変更しました
  • createDelayNode の名前を createDelay に変更しました
  • createJavaScriptNode の名前を createScriptProcessor に変更しました
  • AudioBufferSourceNode.noteOn()start() に置き換えました
  • AudioBufferSourceNode.noteGrainOn()start() に置き換えられました
  • AudioBufferSourceNode.noteOff() の名前を stop() に変更しました。
  • OscillatorNode.noteOn() の名前を start() に変更しました。
  • OscillatorNode.noteOff() の名前を stop() に変更しました。
  • AudioParam.setTargetValueAtTime() の名前を setTargetAtTime() に変更しました。
  • AudioContext.createWaveTable()OscillatorNode.setWaveTable() の名前が createPeriodicWave() andsetPeriodicWave() に変更されました。
  • AudioBufferSourceNode.looping が削除され、.loop が有利になりました
  • エンコードされた音声データの blob を同期的にデコードするための AudioContext.createBuffer(ArrayBuffer, boolean) が削除されました。完了に時間がかかる同期呼び出しはコーディングの効率が良くありません。代わりに非同期 decodeAudioData 呼び出しを使用してください。これはより困難な変更の 1 つであり、実際にロジックフローを変更する必要がありますが、はるかに優れた手法です。Mozilla の Ehsan Angkari は、標準のウェブ オーディオへの変換に関する投稿で、これを行う方法に関するわかりやすいを紹介しています。

その多くは(createRangeNode の名前の変更や createBuffer の同期デコードの削除など)で、デベロッパー ツールのコンソールに明らかにエラーとして表示されます。ただし、次のように以下のように使用されているものもあります。

MULTI_LINE_CODE_PLACEHOLDER_1

はまったく表示されず、通知なく失敗します(myFilterNode.BANDPASS は 未定義に解決され、.type を 未定義に設定しようとしても何も起こりません。ちなみに、これがボコーダーが失敗する原因でした)。同様に、filter.type に関数を使用する数値を割り当てるだけで済みます。

myFilterNode.type = 2;

しかし、今度は文字列列挙型を使用する必要があります。

myFilterNode.type = “bandpass”;

そのため、以下の用語についてコードを grep することをおすすめします。

  • 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(確かに、この方法では偽陽性が大量に発生しますが、これは上記の最後の例を捕捉する唯一の方法です)

お急ぎですぐに実行したい場合は、my monkeypatch webkitAudioContext ライブラリのコピーを入手して、アプリケーションに含めてください。オーディオ ハッキングをお楽しみください!