JSFiddle - React, Tailwind, and code Playground
JavaScript
var width=1E3,octave="A A# B C C# D D# E F F# G G#".split(" "),id="",div,whitekeys=0,keys=[],context=window.AudioContext?new AudioContext:new webkitAudioContext,i=0;
a:for(;8>i;i++)for(var j=0;12>j;j++){if(88<=12*i+j)break a;div=document.createElement("div");div.id="#"==octave[j][1]?octave[j][0]+((12*i+j+9)/12|0)+"s":octave[j]+((12*i+j+9)/12|0);1==j%12||4==j%12||6==j%12||9==j%12||11==j%12?div.setAttribute("style","border:1px solid black; position:absolute; background-color:black; left:"+(width/50*whitekeys-width/200)+"px; width:"+width/100+"px; height: 200px; z-index:1;"):(div.setAttribute("style","border:1px solid black; position:absolute; background-color:white; left:"+
width/50*whitekeys+"px; width:"+width/50+"px; height:300px;"),whitekeys++);document.body.appendChild(div)}document.body.addEventListener("click",play);
function play(b){var c={C:32.703,Cs:34.648,D:36.708,Ds:38.891,E:41.203,F:43.654,Fs:46.249,G:48.999,Gs:51.913,A:55,As:58.27,B:61.735},a=context.createOscillator();a.frequency.value="s"==b.target.id[2]?c[b.target.id[0]+"s"]*Math.pow(2,(b.target.id[1]|0)-1):c[b.target.id[0]]*Math.pow(2,(b.target.id[1]|0)-1);a.type="square";a.connect(context.destination);a.start(0);setTimeout(function(){a.stop(0);a.disconnect(context.destination)},500)};