<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();

function setup() {
  synth = make_Pianoetta().instrument
  
  console.log(synth)
  
  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());
}


function make_Pianoetta() {
// create synth
var instrument = new Tone.MonoSynth();
var synthJSON = {
    "oscillator": {
        "type": "square"
    },
    "filter": {
        "Q": 2,
        "type": "lowpass",
        "rolloff": -12
    },
    "envelope": {
        "attack": 0.5,
        "decay": 3,
        "sustain": 0,
        "release": 0.45
    },
    "filterEnvelope": {
        "attack": 1,
        "decay": 0.32,
        "sustain": 0.9,
        "release": 3,
        "baseFrequency": 150,
        "octaves": 4
    }
};

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