<html>

<head>
 
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>

  <img id="image1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/212131/audiokeys-mapping-rows1.jpg" width="100%">

  <script src="sketch.js"></script>
</body>

</html>
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_Kick().instrument;

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

  keyboard.up(note => synth.triggerRelease());
  
  slider = createSlider(0.5, 5, 0.5, 0);
  slider2 = createSlider(10, 20, 1, 0);

}
function draw() {
  synth.pitchDecay = slider.value()
  synth.octaves = slider2.value()
}

function make_Kick() {
  // create synth
  var instrument = new Tone.MembraneSynth();
  var synthJSON = {
	"pitchDecay"  : 0.05 ,
	"octaves"  : 10 ,
	"oscillator"  : {
		"type"  : "sine"
}  ,
	"envelope"  : {
		"attack"  : 0.001 ,
		"decay"  : 0.4 ,
		"sustain"  : 0.01 ,
		"release"  : 1.4 ,
		"attackCurve"  : "exponential"
	}
}


  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
  };
}

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