Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
JavaScriptのWebAudioAPIを使用してシンプルなシンセサイザーを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

JavaScriptのWebAudioAPIを使用してシンプルなシンセサイザーを作ってみる

作成したシンセサイザーのソースコードはgithubにあります。
このページではWebAudioAPIを使用してノコギリ波でラの音を出すコードの例を紹介しています。

スポンサーリンク

概要

WebAudioAPIを使用してシンプルなシンセサイザーを作ってみました。オシレーターを2基搭載していて、波形はどちらもノコギリ波に固定されています。スライダーを動かすとピッチをずらすことが出来ます。フィルターはローパスフィルターを搭載しています。演奏方法は、マウスで鍵盤をクリックするか、鍵盤に書かれているアルファベットをタイプすると音が出ます。その他音量調整とオクターブを上下1つ変えることが出来ます。
※windowsのChromeとEdgeブラウザで動作確認しています。スマートフォンやタブレットのタッチ操作には対応させていません。

オシレーターの設定をする

WebAudioAPIを利用するには先ず初めにAudioContextインターフェースをインスタンス化することから始まります。 このインスタンスのメソッドを利用することでシンセサイザーに必要なオシレーターやフィルターを生成することが出来ます。
以下のコードはAudioContextをインスタンス化してcreateOscillatorメソッドでオシレーターノードを生成し オシレーターノードプロパティにノコギリ波を設定する例です。

オシレーターを出力先へ接続する

オシレーターの音を出すには現実世界と同じようにスピーカーなどの出力先へ接続する必要があります。AudioContextインターフェースのconnectメソッドを使用し引数に出力先指定することで、接続することが可能になります。
以下のコードは最終出力先のdestinationプロパティへ接続する例です。

音階を付けて音を鳴らす

音階を付けるにはオシレーターノードfrequencyプロパティに周波数で指定する必要があります。ラの音は440HZになります。音を鳴らすにはAudioContextインターフェースのstartメソッドを使用し、止めるにはstopメソッドを使います。
以下のコードはmousedownイベントが発生するとラの音が鳴る例です。最終出力先のdestinationプロパティへ接続する前にゲインノードに接続し、音量を設定してから最終出力先へ接続しています。

最後までお読みいただきありがとうございました。
作成したシンセサイザーのソースコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

モバイルバージョンを終了