The Simple Web (Copy 14594)

✨ นางสาวปัณณพร จึงเปี่ยมสุข

<html>
  <head>
    <title>music</title>
    <style>
      body{
      background:#fff
      }
      
    </style>
  </head>
  
  <body>
    <button class="event_key_q" onclick="note(523)"> Do </button>
    <button class="event_key_w" onclick="note(587)"> Re </button>
    <button class="event_key_e" onclick="note(659)"> Mi </button>
    <button class="event_key_r" onclick="note(698)"> Fa </button>
    <button class="event_key_t" onclick="note(783)"> Sol </button>
    <button class="event_key_y" onclick="note(880)"> la </button>
    <button class="event_key_u" onclick="note(987)"> Ti </button>
<button class="event_key_1" onclick="note(1046)"> Do </button>
<button class="event_key_2" onclick="note(1174)"> Re </button>
<button class="event_key_3" onclick="note(1318)"> Mi </button>
<button class="event_key_4" onclick="note(1396)"> Fa </button>
<button class="event_key_5" onclick="note(1566)"> Sol </button>
<button class="event_key_6" onclick="note(1760)"> la </button>
<button class="event_key_u event_key_7" onclick="note(1974)"> Ti </button>
<script>
  audio = new (window.AudioContext || window.webkitAudioContext)()
  tone = 1;
  function note(f,tone){
    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.setValueCurveAtTime([1,0],audio.currentTime,.2)
  }
  
  
    // สร้างคำสั่งรอรับ keyboard------------------------
  
  document.body.onkeydown = function(event){
    
    let key = event.key //จับ key
    console.log(event.key) //แสดง key ใน console.log
    if(key == ','){
      document.querySelector('.event_key_a').click()
      document.querySelector('.event_key_a').style.background = 'pink'
      setTimeout(()=>{
        document.querySelector('.event_key_a').style.background = '#ccc'
      },500)
    }
    else if(document.querySelector('.event_key_'+key) != null){//ดูว่าคีย์ที่กดมี elemment ที่ใช้คลาสไว้มั้ย
      document.querySelector('.event_key_'+key).click() //สั่งกดแทน
      document.querySelector('.event_key_'+key).style.background = 'pink'
      setTimeout(()=>{
        document.querySelector('.event_key_'+key).style.background = '#ccc'
      },500)
    }
  }
   // สร้างคำสั่งรอรับ keyboard------------------------
</script>