キーテイクアウト

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

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

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

フライトサウンド

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

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

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

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

：audiocontextおよびaudioソース

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

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

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

が必要です

audionodes

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

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

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

再生

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

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

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

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

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

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

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

インストラクターの聲

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

畳み込み

W3C仕様から：

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

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

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

波形

歪みを増やすために、ウェーブシェイパーノードも使用しました。このタイプのノードを使用すると、數(shù)學的な歪みをオーディオ信號に適用して、いくつかの本當に劇的な効果を?qū)g現(xiàn)できます。歪みは、曲線関數(shù)として定義されます。これらの機能には、複雑な數(shù)學が必要になる場合があります。 の場合

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

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

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

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

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

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

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

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

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

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

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

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

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

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

??

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

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