WebオーディオAPIを使用した動的なサウンド

キーテイクアウト

• Web Audio APIは、Webアプリケーションでサウンドを制御する動的で洗練された方法を提供し、その機能が制限されているHTML5オーディオ要素よりも堅牢なソリューションを提供します。
Web Audio APIでは、生の波形データの操作、分析、歪みが可能になり、ゲームやサウンド編集などのアプリケーションに最適です。また、ブラウザ全体で適切にサポートされているきちんとしたAPIを提供します。
• APIでは、オーディオデータのカプセル化に使用できるAudioContextオブジェクトの作成と、複雑な音操作のために一緒に連鎖できるさまざまなオーディオンドを作成できます。これは、フライトシミュレーターゲームでエンジンサウンドのピッチを変更するなど、ダイナミックサウンドを作成するために使用できます。
基本的な再生とは別に、APIは、畳み込みや波形などのより洗練されたサウンド操作を可能にします。これを使用して、スピーカーを通る声などの現実的な効果音を作成できます。さらに、APIはギャップレスオーディオ再生とループも可能にし、Webゲームで発生する一般的な問題を解決します。
• この記事は、MicrosoftのWeb開発シリーズの一部です。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。
WebオーディオAPIの前に、HTML5がオーディオ要素を提供しました。今は覚えておくのは難しいかもしれませんが、オーディオ要素の前に、ブラウザでのサウンドの最良のオプションはプラグインでした！オーディオ要素は確かにエキサイティングでしたが、かなり特異な焦点がありました。それは基本的にビデオのないビデオプレーヤーであり、音楽やポッドキャストのような長いオーディオに適していますが、ゲームの要求には不向きでした。ループの問題、同時の音の制限、グリッチ、およびサウンドデータ自体へのアクセスの完全な不足に耐えました。

幸いなことに、私たちの忍耐は報われました。オーディオ要素が不足している場合、Web Audio APIが配信されます。それは私たちに前例のないサウンドを制御することができ、ゲームから洗練されたサウンド編集まで、すべてに最適です。これはすべて、使用するのが本当に楽しく、よくサポートされている整頓されたAPIを使用しています。

もう少し具体的にしましょう：Web Audioは、サウンドの生の波形データにアクセスし、操作、分析、歪み、またはその他の方法で変更できます。それは、Canvas APIがピクセルに何であるかをオーディオすることです。サウンドデータへの深く、ほとんど自由なアクセスがあります。本当に強力です！ このチュートリアルは、Webプラットフォームと新しいMicrosoft EdgeブラウザーとEdgeHTMLレンダリングエンジンで何が可能かを示すために構築されたFlight Arcadeのシリーズの2番目です。この記事のインタラクティブコードと例は、http：//www.flightarcade.com/learn/にもあります。[YouTube xyaq9tpmxra]

フライトサウンド

フライトシミュレーターの初期のバージョンでさえ、音を使用して飛行の感覚を再現する努力をしました。最も重要なサウンドの1つは、スロットルでピッチを変えるエンジンのダイナミックピッチです。 Webのゲームを再考したとき、静的なエンジンノイズが本当に平らに見えるので、エンジンノイズのダイナミックピッチはWebオーディオの明らかな候補であったことを知っていました。

ここでインタラクティブに試してみることができます。

あまり明白ではありませんでした（おそらくもっと興味深い）。フライトインストラクターの声がありました。飛行アーケードの早期繰り返しで、私たちは録音されたようにインストラクターの声を演奏し、サウンドブースから出てくるように聞こえました！私たちは、「インストラクター」ではなく「ナレーター」と呼ばれることを始めたことに気付きました。どういうわけか、その手つかずの音はゲームの幻想を壊しました。コックピットの騒々しいサウンドにこのような完璧なオーディオが来るのは正しくないように思えました。したがって、この場合、Webオーディオを使用して、音声指示にいくつかの簡単な歪みを適用し、飛行することを学ぶリアリズムを強化します！

記事の最後にインストラクターオーディオのサンプルがあります。以下のセクションでは、これらのサウンドを作成するためにWebオーディオAPIを使用した方法のかなり詳細なビューをご覧ください。 APIを使用する

：audiocontextおよびaudioソース

Webオーディオプロジェクトの最初のステップは、AudioContextオブジェクトを作成することです。一部のブラウザ（Chromeを含む）はまだこのAPIをプレフィックスする必要があるため、コードは次のようになります。

その後、音が必要です。実際にWeb Audio APIを使用してゼロからサウンドを生成できますが、私たちの目的のために、事前に録音されたオーディオソースをロードしたいと考えていました。既にHTMLオーディオ要素を持っている場合は、それを使用できますが、多くの場合は使用できません。結局のところ、Webオーディオを持っている場合、誰がオーディオ要素を必要としますか？最も一般的には、httpリクエストを使用して、オーディオをバッファーに直接ダウンロードするだけです。

AudioContextといくつかのオーディオデータがあります。次のステップは、これらのことを一緒に機能させることです。そのためには、…

が必要です

audionodes

Webオーディオで行うすべてのことは、ある種のオーディオンドを介して行われ、さまざまなフレーバーがあります。一部のノードは、オーディオソースとして使用されます。あなたはそれらを一緒にチェーンして興味深いことをすることができます

audiocontextを一種のサウンドステージと考えるかもしれません。含まれているさまざまな機器、アンプ、スピーカーは、すべて異なるタイプのオーディオノードになります。 WebオーディオAPIを使用することは、これらすべてを一緒にプラグインすることによく似ています（たとえば、ペダルやペダルをアンプ、スピーカーなどに影響を与えます）。

まあ、新しく取得したAudioContextオーディオソースで興味深いことをするために、最初にソースオーディオンドとしてオーディオデータをカプセル化する必要があります。

再生

それだけです。ソースがあります。しかし、再生する前に、宛先ノードに接続する必要があります。便利なため、AudioContextはデフォルトの宛先ノード（通常はヘッドフォンまたはスピーカー）を公開します。接続したら、開始と停止を呼び出すだけです。

各ソースノードで1回start（）を1回だけ呼び出すことができることに注意してください。つまり、「一時停止」が直接サポートされていないことを意味します。ソースが停止すると、期限切れになります。幸いなことに、ソースノードは安価なオブジェクトであり、簡単に作成するように設計されています（オーディオデータ自体、別のバッファで覚えておいてください）。したがって、一時停止したサウンドを再開したい場合は、新しいソースノードを作成して、タイムスタンプパラメーターを使用してstart（）を呼び出すだけです。 AudioContextには、タイムスタンプの管理に使用できる内部クロックがあります。 エンジンサウンド

それは基本のためのことですが、これまでに行ったことすべて（単純なオーディオ再生）は、古いオーディオ要素で実行できた可能性があります。飛行アーケードには、もっとダイナミックなことをする必要がありました。エンジンの速度でピッチを変えることを望んでいました。

それは実際にはWebオーディオでは非常に簡単です（そしてそれなしではほとんど不可能だったでしょう）！ソースノードには、再生速度に影響するレートプロパティがあります。ピッチを増やすために、再生率を上げるだけです：

エンジンサウンドもループする必要があります。それも非常に簡単です（そのためのプロパティもあります）：

しかし、キャッチがあります。多くのオーディオ形式（特に圧縮オーディオ）は、オーディオデータを固定サイズのフレームに保存し、多くの場合、オーディオデータ自体が最終フレームを「埋める」ことはありません。これにより、オーディオファイルの最後に小さなギャップが残り、それらのオーディオファイルがループされるとクリックまたはグリッチが表示されます。標準のHTMLオーディオ要素は、このギャップを制御することはできません。これは、ループオーディオに依存するWebゲームにとって大きな課題になる可能性があります。

幸いなことに、WebオーディオAPIでのギャップレスオーディオ再生は本当に簡単です。これは、オーディオのループ部分の開始と終了のタイムスタンプを設定するだけの問題です（これらの値はオーディオソース自体に関連しており、AudioContextクロックではありません）。

インストラクターの声

これまでのところ、私たちが行ったすべては、ソースノード（オーディオファイル）と出力ノード（早めに設定したサウンド宛先、おそらくスピーカー）を使用していますが、オーディオノードはさらに多くを使用できます。健全な操作または分析。飛行アーケードでは、2つのノードタイプ（コンバルノードとWaveshapernode）を使用して、インストラクターの声がスピーカーを通って来るように聞こえます。

畳み込み

W3C仕様から：

畳み込みは数学的なプロセスであり、オーディオ信号に適用して、多くの興味深い高品質の線形効果を実現できます。非常に多くの場合、この効果は、コンサートホール、大聖堂、屋外の円形劇場などの音響空間をシミュレートするために使用されます。また、クローゼットの中から来るくぐもった音、水中の音、電話を通しての音、ビンテージスピーカーキャビネットを通して遊ぶなど、複雑なフィルター効果にも使用できます。この手法は、主要な映画と音楽の制作で非常に一般的に使用されており、非常に用途が広く高品質であると考えられています。

畳み込みは基本的に2つの音を組み合わせています。処理する音（インストラクターの声）とインパルス応答と呼ばれるサウンドです。インパルス応答は実際、サウンドファイルですが、この種の畳み込みプロセスにのみ役立ちます。別のサウンドで畳み込んだときに特定の効果を生成するように設計された、ある種のオーディオフィルターと考えることができます。結果は、通常、オーディオの単純な数学的操作よりもはるかに現実的です。

使用するには、コンバルバーノードを作成し、インパルス応答を含むオーディオをロードしてから、ノードを接続します。

波形

歪みを増やすために、ウェーブシェイパーノードも使用しました。このタイプのノードを使用すると、数学的な歪みをオーディオ信号に適用して、いくつかの本当に劇的な効果を実現できます。歪みは、曲線関数として定義されます。これらの機能には、複雑な数学が必要になる場合があります。 の場合

以下の例では、MDNの友人から良いものを借りました。

元の波形と波形が適用された波形の間の厳しい違いに注意してください。

ここでインタラクティブに試してみることができます。

上記の例は、Web Audio APIでどれだけできるかという劇的な表現です。ブラウザからサウンドにかなり劇的な変更を加えているだけでなく、波形を分析してキャンバス要素にレンダリングしています。 WebオーディオAPIは信じられないほど強力で多用途で、率直に言って、とても楽しいです！JavaScriptを使用したより実践的な

Microsoftには、多くのオープンソースJavaScriptのトピックに関する無料の学習がたくさんあり、Microsoft Edgeでさらに多くを作成するという使命を担っています。ここにチェックアウトするものがあります：

Microsoft Edge Web Summit 2015（新しいブラウザ、新しいWebプラットフォーム機能、コミュニティのゲストスピーカーで期待すべきことの完全なシリーズ）
• // build/and windows 10のビルド（サイトとアプリ用の新しいJavaScriptエンジンを含む）
• Webを壊さずにJavaScriptを前進させる（Christian Heilmannの最近の基調講演）
• ホストされたWebアプリとWebプラットフォームのイノベーション（Manifold.jsなどのトピックに関する深いダイビング）
• HTML/JavaScriptをより高速にするための実用的なパフォーマンスのヒント（レスポンシブデザインからカジュアルゲーム、パフォーマンスの最適化まで）
• 最新のWebプラットフォームJumpstart（HTML、CSS、およびJSの基礎）
および開始するためのいくつかの無料ツール：Visual Studio Code、Azure Trial、およびクロスブラウザーテストツール - すべてMac、Linux、またはWindowsで利用できます。

この記事は、MicrosoftのWeb Dev Techシリーズの一部です。 Microsoft Edgeと新しいEdgeHTMLレンダリングエンジンを共有できることを楽しみにしています。モダンでMac、iOS、Android、またはWindowsデバイスで無料の仮想マシンを入手するか、リモートでテストします。 WebオーディオAPIを使用したダイナミックサウンドに関するよくある質問（FAQ）

WebアプリケーションにWeb Audio APIの使用を開始するにはどうすればよいですか？

​​ Web Audio APIの使用を開始するには、最初にAudioContextインターフェイスのインスタンスを作成する必要があります。これは、オーディオプロジェクトの主要な「コンテナ」であり、通常はページの読み込みで作成されます。 AudioContextのインスタンスを作成したら、このコンテキストでノードを作成し、それらを一緒に接続してオーディオルーティンググラフを形成し、オーディオデータを操作できます。すべてのブラウザがWebオーディオAPIを完全にサポートしているわけではないため、ブラウザの互換性を確認することを忘れないでください。それぞれが特定の目的を持つオーディオノードの種類。最も一般的に使用されるノードには、ボリュームを制御するためのゲインノード、音を生成するためのオシラトルノード、オーディオエフェクトを適用するためのbiquadfilternode、およびサウンドサンプルを再生するためのaudiobuffersourcenodeが含まれます。各ノードを他のノードに接続して、オーディオルーティンググラフを形成できます。

Web Audio APIを使用してオーディオのボリュームを制御するにはどうすればよいですか？

GaineNodeを使用してオーディオのボリュームを制御できます。このノードは、オーディオのラウドネスを制御するために使用されます。 audiocontextのcreategain（）メソッドを使用してゲインノードを作成できます。作成されたら、ゲイン属性の値を設定することにより、ゲイン（ボリューム）を調整できます。 。このノードは、周期的な波形を生成します。 audiocontextのcreateoscillator（）メソッドを使用してオシラトルノードを作成できます。作成したら、波形のタイプを設定して（Sine、Square、Sawtooth、またはTriangle）と周波数を生成できます。 BiquadFilternodeを使用してオーディオエフェクトを適用できます。このノードは、トーンコントロールなどのさまざまな効果を作成するために使用できる2次フィルターを表します。 audiocontextのcreatebiquadfilter（）メソッドを使用して、biquadfilternodeを作成できます。作成したら、フィルターの種類（ローパス、ハイパス、バンドパスなど）と周波数、Q、およびゲインを設定できます。

AudioBufferSourcenodeを使用してサウンドサンプルを再生できます。このノードは、AudioBufferから直接オーディオデータを再生するために使用されます。 audiocontextのcreatebuffersource（）メソッドを使用して、audiobuffersourcenodeを作成できます。作成したら、再生するオーディオデータにバッファを設定し、start（）メソッドを使用して再生を開始できます。

connect（）メソッドを使用してオーディオノードを一緒に接続できます。この方法は、オーディオルーティンググラフを形成するために使用されます。 1つのノードを別のノードに、または1つのノードを複数のノードに接続できます。オーディオデータは、ソースノードから宛先ノードに流れます。オーディオノードによって提供される属性。たとえば、オシラトルノードの周波数を変更したり、ゲインノードのゲインを調整したり、BiquadFilternodeにフィルターを適用したりできます。 AnalySernodeを使用して、リアルタイムの頻度と時間領域のデータをキャプチャすることもできます。 'オーディオプロジェクトの場合。オーディオノードを作成し、オーディオルーティンググラフを管理し、再生を制御するために使用されます。ページロードでAudioContextのインスタンスを作成し、このインスタンスを使用してオーディオノードを作成および操作できます。

Web Audio APIのブラウザ互換性は何ですか？

​​

Web Audio APIは、Chrome、Firefox、Safari、Edgeなどの最新のブラウザで広くサポートされています。ただし、すべての機能がすべてのブラウザで完全にサポートされているわけではありません。 Webアプリケーションで使用する前に、特定の機能サポートを確認することをお勧めします。

以上がWebオーディオAPIを使用した動的なサウンドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。