WebAudio - ADSR

Full ADSR

HTML

<script src="https://rawgit.com/kylestetz/AudioKeys/master/dist/audiokeys.js"></script>
<div>
 A-time : <input id="at" type="range" min=0 max=10 step=0.001 value=0.1>
</div>
<div>
  D-time : <input id="dt" type="range" min=0 max=1 step=0.001 value=0.2>
</div>
<div>
 S-value : <input id="st" type="range" min=0 max=1 step=0.001 value=0.5>
</div>
<div>
 S-time : <input id="sv" type="range" min=0 max=0.2 step=0.001 value=0.1>
</div>
<div>
 R-time : <input id="rt" 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 at = document.querySelector('#at');
var dt = document.querySelector('#dt');
var st = document.querySelector('#st');
var sv = document.querySelector('#sv');
var rt = document.querySelector('#rt');

keyboard.down(playNewSound)b

function playNewSound(note) {
  var osc = audioContext.createOscillator();
  var gain = audioContext.createGain();
  osc.connect(gain);
  gain.connect(audioContext.destination);
	osc.frequency.value = note.frequency
  
  var ct = audioContext.currentTime;
  
  var attack = parseFloat(at.value);
  var decay = parseFloat(dt.value);
  var sustain = parseFloat(st.value);
  var sustainVal = parseFloat(sv.value);
  var release = parseFloat(rt.value);
  
  osc.start(0);
  gain.gain.setValueAtTime(0,ct);
  gain.gain.linearRampToValueAtTime(1,ct+attack);
  gain.gain.linearRampToValueAtTime(sustainVal,ct+attack+decay);
  gain.gain.linearRampToValueAtTime(sustainVal,ct+attack+decay+sustain);
  gain.gain.linearRampToValueAtTime(0,ct+attack+decay+sustain+release);
  osc.stop(ct+attack+decay+sustain+release);
}