作成したシンセサイザーのソースコードはgithubにあります。
このページではWebAudioAPIを使用してノコギリ波でラの音を出すコードの例を紹介しています。
概要
WebAudioAPIを使用してシンプルなシンセサイザーを作ってみました。オシレーターを２基搭載していて、波形はどちらもノコギリ波に固定されています。スライダーを動かすとピッチをずらすことが出来ます。フィルターはローパスフィルターを搭載しています。演奏方法は、マウスで鍵盤をクリックするか、鍵盤に書かれているアルファベットをタイプすると音が出ます。その他音量調整とオクターブを上下１つ変えることが出来ます。
※windowsのChromeとEdgeブラウザで動作確認しています。スマートフォンやタブレットのタッチ操作には対応させていません。
オシレーターの設定をする
WebAudioAPIを利用するには先ず初めにAudioContextインターフェースをインスタンス化することから始まります。 このインスタンスのメソッドを利用することでシンセサイザーに必要なオシレーターやフィルターを生成することが出来ます。
以下のコードはAudioContextをインスタンス化してcreateOscillatorメソッドでオシレーターノードを生成し オシレーターノードプロパティにノコギリ波を設定する例です。
|
1 2 3 4 5 6 |
// インスタンス化 const audioCtx = new AudioContext(); // オシレーターを生成 const osc = audioCtx.createOscillator(); // オシレーターの波形にノコギリ波を設定 osc.type = "sawtooth"; |
オシレーターを出力先へ接続する
オシレーターの音を出すには現実世界と同じようにスピーカーなどの出力先へ接続する必要があります。AudioContextインターフェースのconnectメソッドを使用し引数に出力先指定することで、接続することが可能になります。
以下のコードは最終出力先のdestinationプロパティへ接続する例です。
|
1 2 |
// 出力先へ接続 osc.connect(audioCtx.destination); |
音階を付けて音を鳴らす
音階を付けるにはオシレーターノードのfrequencyプロパティに周波数で指定する必要があります。ラの音は440HZになります。音を鳴らすにはAudioContextインターフェースのstartメソッドを使用し、止めるにはstopメソッドを使います。
以下のコードはmousedownイベントが発生するとラの音が鳴る例です。最終出力先のdestinationプロパティへ接続する前にゲインノードに接続し、音量を設定してから最終出力先へ接続しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// インスタンス化 const audioCtx = new AudioContext(); // ゲインノードを生成 let masterVolume = audioCtx.createGain(); // ボリュームの大きさ設定 masterVolume.gain.value = 0.1; // NoteOn document.addEventListener("mousedown", () => { // オシレーターを生成 const osc = audioCtx.createOscillator(); // オシレーターの波形にノコギリ波を設定 osc.type = "sawtooth"; // 出力先へ接続 osc.connect(masterVolume); masterVolume.connect(audioCtx.destination); // 音程を設定 ラの音は440HZ frequency = 440; osc.frequency.value = frequency; // 音を鳴らす osc.start(); // 音を止める window.setTimeout(function () { osc.stop(); }, 300); }); |
最後までお読みいただきありがとうございました。
作成したシンセサイザーのソースコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。