オーディオエフェクト

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

このチュートリアルには、Web Audio APIが必要です。

Web Audio APIを使用する

PlayCanvasでは、Web Audio APIの機能をフルに活用して、音声に強力なエフェクトを追加することができます。このチュートリアルでは、さまざまなエフェクトをオーディオサンプルに追加する方法が説明されています。

こちらからこのシーンをご覧いただけます。このシーンのルートエンティティには、Soundコンポーネントがあり、1つのスロットが単純なループ処理の音声サンプルを再生します。 Soundコンポーネントの動作に慣れていない場合は、Basic Tutorialを確認してください。

ルートエンティティには、2つのスクリプトを持つScriptコンポーネントもあります。1つのスクリプトはユーザーインターフェイスを担当し、もう1つがフォーカスするスクリプトです: application.js。

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

Web Audio APIを使用すると、オーディオノードを作成し、オーディオルーティンググラフを形成するために接続することができます。オーディオサンプルが再生されると、それぞれのノードで処理され、最終的には通常スピーカーに到達します。詳細についてはこちらをご覧ください。

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

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

次に、ここで説明されているように、多くの音声サンプルをインパルス応答としてConvolverに使用しています。各オーディオサンプルはオーディオアセットであり、どのボタンを押すかに応じて、そのアセットを使用し、内部バッファをConvolverバッファに割り当てます。

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

その後、Convolverをサウンドスロットに接続します。

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

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

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

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

Soundコンポーネント APIの詳細についてはこちらをご覧ください。