var t,z = document,

    ih = 'innerHTML',

    iO = 'indexOf',

    hzMap = [],

    keyMap = 'Q2W3ER5T6Y7UZSXDCVGBHNJM'.split(''),

    activeTones = [],

    ac = new (AudioContext||webkitAudioContext)(),

    o = ac.createOscillator(),

    gn = ac.createGain();

​

o.connect(gn); o.type = 'square'; o.start();

gn.connect(ac.destination); gn.gain.value = 0;

​

z.body[ih] += '<b id="p"></b><style>p{align-items:flex-end;display:inline-flex;width:6%;height:99px;background:#fea;margin:5px}[s]{color:#fff;background:#000;position:absolute;height:50px;margin-left:-3%}[a*="t"]{padding:0 0 25px}</style>';

p[ih] = keyMap.map(function(key, index) {

  hzMap.push(440*Math.pow(2,(index-33)/12));

  return '<p id="_' + index + ((!~[1,3,6,8,10][iO](index%12)) ? '"' : '"s=""') + '>' + key + '</p>';

}).join('');

​

function playNote(i) {

  clearTimeout(t);

  o.frequency.value = hzMap[i];

  gn.gain.value = .5;

}

​

function stopeNote() {

  ;

  if((gn.gain.value *= .9) > 0 && !activeTones.length)

    t = setTimeout(stopeNote, 9);

}

​

z.onkeyup = z.onkeydown = function (e) {

  var index = keyMap[iO](String.fromCharCode(e.keyCode)),

      isDown = e.type == 'keydown';

​

  if (!~index || (~activeTones[iO](index) && isDown)) return;

​

  window['_'+index].setAttribute('a', !!isDown);

​

  if (isDown) {

    activeTones.push(index);

    playNote(index);

  }

​

  else {

    activeTones.splice(activeTones[iO](index),1);

​

    if (!activeTones.length) stopeNote();

    else playNote(activeTones[0]);

  }

}