下準備

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")

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