<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
};
}
This Pen doesn't use any external CSS resources.