WebAudio Attack/Decay

Change Attack/Decay using Sliders + AudioKeys

HTML

<script src="https://rawgit.com/kylestetz/AudioKeys/master/dist/audiokeys.js"></script>
<div>
 A : <input id="a" type="range" min=0 max=0.2 step=0.001 value=0.1>
</div>
<div>
  D : <input id="d" type="range" min=0 max=1 step=0.001 value=0.2>
</div>

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var audioContext = new AudioContext();

var keyboard = new AudioKeys({
  polyphony: 1,
  rows: 2,
  priority: 'lowest'
});

var a = document.querySelector('#a');
var d = document.querySelector('#d');

keyboard.down(playNewSound)

function playNewSound(note) {
  var osc = audioContext.createOscillator();
  var gain = audioContext.createGain();
  osc.connect(gain);
  gain.connect(audioContext.destination);
  osc.type = 'sawtooth';
	osc.frequency.value = note.frequency
  
  var ct = audioContext.currentTime;
  
  var attack = parseFloat(a.value);
  var decay = parseFloat(d.value);
  
  osc.start(0);
  gain.gain.setValueAtTime(0,ct, 0.005);
  gain.gain.linearRampToValueAtTime(1,ct+attack);
  gain.gain.linearRampToValueAtTime(0,ct+attack+decay);
  osc.stop(ct+attack+decay);
}