作成したシンセサイザーのソースコードはgithubにあります。
このページではWebAudioAPIを使用してノコギリ波でラの音を出すコードの例を紹介しています。
概要
WebAudioAPIを使用してシンプルなシンセサイザーを作ってみました。オシレーターを２基搭載していて、波形はどちらもノコギリ波に固定されています。スライダーを動かすとピッチをずらすことが出来ます。フィルターはローパスフィルターを搭載しています。演奏方法は、マウスで鍵盤をクリックするか、鍵盤に書かれているアルファベットをタイプすると音が出ます。その他音量調整とオクターブを上下１つ変えることが出来ます。
※windowsのChromeとEdgeブラウザで動作確認しています。スマートフォンやタブレットのタッチ操作には対応させていません。
オシレーターの設定をする
WebAudioAPIを利用するには先ず初めにAudioContextインターフェースをインスタンス化することから始まります。 このインスタンスのメソッドを利用することでシンセサイザーに必要なオシレーターやフィルターを生成することが出来ます。
以下のコードはAudioContextをインスタンス化してcreateOscillatorメソッドでオシレーターノードを生成し オシレーターノードプロパティにノコギリ波を設定する例です。
// インスタンス化
const audioCtx = new AudioContext();
// オシレーターを生成
const osc = audioCtx.createOscillator();
// オシレーターの波形にノコギリ波を設定
osc.type = "sawtooth";
オシレーターを出力先へ接続する
オシレーターの音を出すには現実世界と同じようにスピーカーなどの出力先へ接続する必要があります。AudioContextインターフェースのconnectメソッドを使用し引数に出力先指定することで、接続することが可能になります。
以下のコードは最終出力先のdestinationプロパティへ接続する例です。
// 出力先へ接続
osc.connect(audioCtx.destination);音階を付けて音を鳴らす
音階を付けるにはオシレーターノードのfrequencyプロパティに周波数で指定する必要があります。ラの音は440HZになります。音を鳴らすにはAudioContextインターフェースのstartメソッドを使用し、止めるにはstopメソッドを使います。
以下のコードはmousedownイベントが発生するとラの音が鳴る例です。最終出力先のdestinationプロパティへ接続する前にゲインノードに接続し、音量を設定してから最終出力先へ接続しています。
// インスタンス化
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にあります。
その他、作成したアプリやゲームの一覧はこちらにあります。
