QE test

✨ นางสาวประภัสสร ไชยเพ็ชร

</head>
    
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');

body {
	  height: 100vh;
	  width: 100vw;
	  display: flex;
	  justify-content: center;
 	  align-items: center;
     background: blueviolet;
	  font-family: 'Oxygen', sans-serif;
	}
	.piano {
	  display: flex;
 	  flex-direction: row;
	}
	.key {
	  height: calc(var(--width)*4);
	  width: var(--width);
	  display: flex;
 	  justify-content: center;
 	  align-items: flex-end;
 	  border-bottom-left-radius: 10px;
 	  border-bottom-right-radius: 10px;
	}
	.white {
 	 --width: 80px;
	  background: white;
	  border: 1px solid grey;
	}
	.white:active {
  	background: #ccc;
	}
	.black {
	  --width: 50px;
	  z-index: 2;
	  background: black;
	  color: white;
  	  box-shadow: 3px 3px 10px 2px #000;
	  margin-left: calc(var(--width) / -2);
	  margin-right: calc(var(--width) / -2);
	}
	.black:active {
 	 background: #333;
	}
     
    </style>
  
  <body>
    
<div class="piano">
  <button class="key white" onclick="note(261)"></button>
  <button class="key black" onclick="note(293)"></button> 
  <button class="key white" onclick="note()"></button> 
  <button class="key black" onclick="note()"></button> 
  <button class="key white" onclick="note()"></button> 
  <button class="key white" onclick="note()"></button> 
  <button class="key black" onclick="note()"></button> 
  <button class="key white" onclick="note()"></button> 
  <button class="key black" onclick="note()"></button> 
  <button class="key white" onclick="note()"></button> 
  <button class="key black" onclick="note()"></button> 
  <button class="key white" onclick="note()"></button> 
</div>
  </body>
  
  <script>
    audio = new (window.AudioContext || window.webkitAudioContext)()
    function note(f){
      console.log(f)
      let time = audio.currentTime
      let note_osci = audio.createOscillator()
    	let note_gain = audio.createGain()
    	note_osci.connect(note_gain)
    	note_gain.connect(audio.destination)
    	note_osci.frequency.value = f
    	note_osci.start()
      note_gain.gain.setValueAtTime(0.15, time)
      note_gain.gain.linearRampToValueAtTime(0, time + .5)
  </script>
</html>