音声エフェクト

それぞれのボタンをクリックしてサウンドエフェクトを試してください。

このチュートリアルはWeb Audio API への対応を必要とします。

Web Audio APIの使用

PlayCanvasではWeb Audio APIを活用して音声に協力な効果を追加することができます。このチュートリアルでは、オーディオサンプルに様々な効果を追加する方法を説明します。

こちらからシーンを確認できます。このシーンのルートエンティティには、ひとつのスロットで会話音声サンプルをループで再生するSoundコンポーネントがあります。Soundコンポーネントの仕組みにはこちらのベーシックチュートリアルをご確認ください。

ルートエンティティには、2つのスクリプトを持つスクリプトコンポーネントがあります。一つのスクリプトはユーザーインターフェイスを担当します。次の、もう一方のスクリプトについて説明します： application.js

このスクリプトはアプリケーションの効果音を管理します。

Web Audio APIを使用すると、様々なオーディオノードを作成して、それらを接続してオーディオルーティンググラフを形成することができます。オーディオサンプルが再生されると、各ノードによって処理され、最終的に目的地に到達します（通常はスピーカー）。詳細はこちらです。

この例では、Convolver nodeを使用しています。アプリケーションスクリプトでは、次のようにノードを作成しています：

this.convolver = this.app.systems.sound.context.createConvolver();

こちらで説明している通り、コンボルバのインパルス応答として、オーディオサンプルを複数使用します。それぞれのオーディオサンプルはオーディオアセットです。押すボタンに応じてそのアセットを使用して、次のようにコンボルババッファに対して内部バッファを割り当てます。

var asset = this[assetName];
this.convolver.buffer = asset.resource.buffer;

次に、以下のように音声スロットにコンボルバを接続します：

this.entity.sound.slot('speech').setExternalNodes(this.convolver);

NoneというボタンをクリックするとすべてのエフェクトをオフにしてスロットでclearExternalNodes を呼び出します：

this.entity.sound.slot('speech').clearExternalNodes();

オーディオノードの大きなグラフがあり、スロットに接続したい場合は、setExternalNodesのグラフの最後のノードと最初のノードを指定する必要があります。そうすることで、PlayCanvasはスピーカーに正しく最後のノードを接続することができます。

サウンドコンポーネントのAPIに関する詳細はこちら。