การบ้าน Web audio (64070236 ศิวนาถ ธิศาเวช)

✨ SIVANAT THISAWET

<html>
  <head>
    <title>Piano</title>
    <style>

body {
			background-image: linear-gradient(to top, #d696aa 0%, #1d181a 100%);
        margin: 0;
        min-height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .piano {
			display: flex;
      }
      .key {
			height: calc(var(--width) * 4);
        width: var(--width);
      }
      .white {
			--width: 100px;
        background-color: white;
        border: 1px solid #333;
        text-align:center;
        border-radius: 10px;
      }
      .black {
			--width: 60px;
        background-color: black;
        margin-left: calc(var(--width)/-2);
        margin-right: calc(var(--width)/-2);
        z-index: 2;
        
      }
      .howwhite{
        	position: absolute;
			width: 240px;
        	height:330px;
        	left:170px;
        	border: 5px solid pink;
        	border-radius: 10px;
        	background-color: black;
         z-index: 3;
        	right: 50px;
        	text-align: center;
        	margin: 0;
        	padding: 0;
      }
      .howblack{
        	position: absolute;
			width: 240px;
        	height:330px;
        	left:1500px;
        	border: 5px solid pink;
        	border-radius: 10px;
        	background-color: black;
         z-index: 3;
        	right: 50px;
        	text-align: center;
        	margin: 0;
        	padding: 0;
      }
      p, h1, h2{
        color:pink;
      }
    </style>
    
  </head>
  <div class="howwhite">
    <h2>
      White key
    </h2>
    <p>C press a</p>
    <p>D press s</p>
    <p>E press d</p>
    <p>F press f</p>
    <p>G press g</p>
    <p>A press h</p>
    <p>B press j</p>

</div>
  <div class="howblack">
    <h2>
      Black key
    </h2>
    <p>C# press w</p>
    <p>D# press e</p>
    <p>F# press t</p>
    <p>G# press y</p>
    <p>A# press u</p>

</div>
  <div class="piano">
    <div id="event_key_a" class="key white" onclick="note(261)"></div>
    <div id="event_key_w" class="key black" onclick="note(277)"></div>
    <div id="event_key_s" class="key white" onclick="note(293)"></div>
    <div id="event_key_e" class="key black" onclick="note(311)"></div>
    <div id="event_key_d" class="key white" onclick="note(329)"></div>
    <div id="event_key_f" class="key white" onclick="note(349)"></div>
    <div id="event_key_t" class="key black" onclick="note(369)"></div>
    <div id="event_key_g" class="key white" onclick="note(391)"></div>
    <div id="event_key_y" class="key black" onclick="note(415)"></div>
    <div id="event_key_h" class="key white" onclick="note(440)"></div>
    <div id="event_key_u" class="key black" onclick="note(466)"></div>
    <div id="event_key_j" class="key white" onclick="note(493)"></div>
  </div>
  <script>
    audio = new (window.AudioContext || window.webkitAudioContext)()
    osci = audio.createOscillator()
    gain = audio.createGain()
    osci.connect(gain)
    gain.connect(audio.destination)
      
    function note(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.value = 0.2;
      note_gain.gain.linearRampToValueAtTime(0,time+0.4)
    }
      
    document.body.onkeydown = function(event){
		console.log(event)
      let key = event.key
      if(key == 'a'){
			event_key_a.click()
      }
      if(key == 's'){
			event_key_s.click()
      }
      if(key == 'd'){
			event_key_d.click()
      }
      if(key == 'f'){
			event_key_f.click()
      }
      if(key == 'g'){
			event_key_g.click()
      }
      if(key == 'h'){
			event_key_h.click()
      }
      if(key == 'j'){
			event_key_j.click()
      }
      if(key == 'k'){
			event_key_k.click()
      }
		// โน้ตตัวดำ
      if(key == 'w'){
			event_key_w.click()
      }
      if(key == 'e'){
			event_key_e.click()
      }
      if(key == 't'){
			event_key_t.click()
      }
      if(key == 'y'){
			event_key_y.click()
      }
      if(key == 'u'){
			event_key_u.click()
      }
    }
    </script>
</html>