JSFiddle - React, Tailwind, and code Playground

JavaScript

var context = window.AudioContext ? new AudioContext() : new webkitAudioContext();
for (var i = 0, whitekeys = 0; i < 88; i++, whitekeys += halftone ? 0 : 1) {
  halftone = "A#BC#D#EF#G#"[i%12] == "#" ;
  var div = document.createElement('div');
  div.id = i;
  div.setAttribute('style', 'position:absolute; border:1px solid black;' +
    (halftone ? 'background-color:black; width:10px; height:60px; z-index:1;' : 'width:20px; height:100px;') +
    'left:'+ (20*whitekeys - (halftone ? 5 : 0)) + 'px;');
  document.body.appendChild(div);
}
document.body.addEventListener('click', play);
function play(e) {
	var osc = context.createOscillator();
	osc.frequency.value = 55 * Math.pow(2, e.target.id/12.0);
	osc.connect(context.destination);
	osc.start(0);
    osc.type = "triangle";
	setTimeout(function() {
	    osc.stop(0);
	    osc.disconnect(context.destination);
	}, 1000 / 2);
}