<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_Noise().instrument;
console.log(synth.noise._playbackRate);
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());
slider = createSlider(0.1, 30, 0.1, 0);
}
function draw() {
synth.noise._playbackRate = slider.value()
}
function make_Noise() {
// create synth
var instrument = new Tone.NoiseSynth();
var synthJSON = {
"noise": {
"type": "pink",
"playbackRate" : 0.1
},
"envelope": {
"attack": 0.01,
"decay": 2,
"sustain": 0.5,
"release": 3
}
}
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.