<button onclick="toggle()">Start/stop</button>
html, body {
  margin: 0;
  padding: 0;
}
/* PDM Course: Sound Unit

  Preset-AlienChorus
*/

var synth;
// create a keyboard
var keyboard = new AudioKeys();
var slider;
function setup() {
  synth = make_Hat().instrument;

  keyboard.down((note) => {
    // convert MIDI velocity to gain
    var velToGain = map(note.velocity, 0, 127, 0, 1);
    synth.triggerAttack(Tone.now(), velToGain);
  });

  keyboard.up((note) => synth.triggerRelease());

  const seq = new Tone.Sequence(
    (time, note) => {
      synth.triggerAttackRelease(note, 0.1, time);
      // subdivisions are given as subarrays
    },
    ["C4", ["E4", "D4", "E4"], "G4", ["A4", "G4"]]
  ).start(0);
  

  slider = createSlider(1, 4000, 4000, 0);
  slider2 = createSlider(10, 50, 32, 0);
  slider3 = createSlider(50, 200, 200, 0);
}
function draw() {
  synth.resonance = slider.value();
  synth.modulationIndex = slider2.value();

  synth.frequency.value = slider3.value();
}

function make_Hat() {
  // create synth
  var instrument = new Tone.MetalSynth().toDestination();
  var synthJSON = {
    frequency: 200,
    envelope: {
      attack: 0.0001,
      decay: 1.4,
      release: 0.2
    },
    harmonicity: 10,
    modulationIndex: 32,
    resonance: 4000,
    octaves: 1.5
  };

  instrument.set(synthJSON);

  var effect1, effect2, effect3;

  // make connections
  // instrument.connect(Tone.Destination);

  // define deep dispose function
  function deep_dispose() {
    if (instrument != undefined && instrument != null) {
      instrument.dispose();
      instrument = null;
    }
  }

  return {
    instrument: instrument,
    deep_dispose: deep_dispose
  };
}

function toggle() {
  Tone.Transport.toggle()
} 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.rawgit.com/kylestetz/AudioKeys/master/dist/audiokeys.js
  2. https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.12/Tone.js
  3. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js