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

bubudoufu

2年前

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

概要
オシレーターの設定をする
オシレーターを出力先へ接続する
音階を付けて音を鳴らす

概要

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

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

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

// インスタンス化
const audioCtx = new AudioContext();
// オシレーターを生成
const osc = audioCtx.createOscillator();
// オシレーターの波形にノコギリ波を設定
osc.type = "sawtooth";

// インスタンス化

const audioCtx = new AudioContext();

// オシレーターを生成

const osc = audioCtx.createOscillator();

// オシレーターの波形にノコギリ波を設定

osc.type = "sawtooth";

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

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

// 出力先へ接続
osc.connect(audioCtx.destination);

1 2	// 出力先へ接続 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);
});

// インスタンス化

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にあります。
その他、作成したアプリやゲームの一覧はこちらにあります。