p5.js Web Editor上で Tone.js を使って音を鳴らす【その2： INSTRUMENT をいろいろ試す】

12811 ワード
p5.jsWebEditor Tone.js p5.js p5.js テキストリンク

以下の記事の続きです。

●p5.js Web Editor上で Tone.js を使って音を鳴らす【その1】 - Qiita
　https://qiita.com/youtoy/items/d320580be404594f8cf8

公式ドキュメントの中で、以下の画像に出てる部分のものを使い比べてみる、という話です。

下準備

p5.js Web Editor でのライブラリ　の読み込み（index.html での追記）は、前回と同様です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.32/Tone.min.js"></script>

JavaScript のプログラム

sketch.js の内容は、以下のようにしてみました。

let synth = [];

function setup() {
  createCanvas(400, 400);
  background(220);

  synth.push(new Tone.AMSynth().toDestination());
  synth.push(new Tone.DuoSynth().toDestination());
  synth.push(new Tone.FMSynth().toDestination());
  synth.push(new Tone.MembraneSynth().toDestination());
  synth.push(new Tone.MetalSynth().toDestination());

  synth.push(new Tone.MonoSynth().toDestination());
  synth.push(new Tone.NoiseSynth().toDestination());
  synth.push(new Tone.PluckSynth().toDestination());
  synth.push(new Tone.PolySynth().toDestination());
  synth.push(new Tone.Synth().toDestination());
}

function draw() {}

function keyPressed() {
  let synthTemp;
  const now = Tone.now();
  switch (key) {
    case "a":
      synthTemp = synth[0];
      synthTemp.triggerAttackRelease("C4", "4n");
      break;
    case "s":
      synthTemp = synth[1];
      synthTemp.triggerAttackRelease("C4", "4n");
      break;
    case "d":
      synthTemp = synth[2];
      synthTemp.triggerAttackRelease("C4", "4n");
      break;
    case "f":
      synthTemp = synth[3];
      synthTemp.triggerAttackRelease("C4", "4n");
      break;
    case "g":
      synthTemp = synth[4];
      synthTemp.triggerAttackRelease("C4", "4n");
      break;

    case "z":
      synthTemp = synth[5];
      synthTemp.triggerAttackRelease("C4", "4n");
      break;
    case "x":
      synthTemp = synth[6];
      synthTemp.triggerAttackRelease("4n");
      break;
    case "c":
      synthTemp = synth[7];
      synthTemp.triggerAttack("C4");
      break;
    case "v":
      synthTemp = synth[8];
      synthTemp.triggerAttackRelease(["C4", "E4", "A4"], "4n");
      break;
    case "b":
      synthTemp = synth[9];
      synthTemp.triggerAttackRelease("C4", "4n");
      break;
  }
}

音を鳴らす部分について、以下のものは少し指定する内容に違いがあります。

  • NoiseSynth()
    • triggerAttackRelease("4n")
  • PluckSynth()
    • triggerAttack("C4")
  • PolySynth()
    • triggerAttackRelease(["C4", "E4", "A4"], "4n")

上記を動かしてキーをポチポチ押していくことで、音の違いを簡単に確認できるようになりました。