Published 2022. 2. 19. 16:56

클릭한 키보드 값을 받아온다. 이 때 우리는 아스키 코드로 각 키에 기능을 부여할 수 있다.

아래는 keydown을 이용하여 만든 간단한 피아노이다.

      $(document).ready(function(){
          $(document).on("keydown", keyEventFnc)
          //이벤트 객체의 정보를 매개변수 e로 받는다.
          function keyEventFnc(e){
              switch(e.keyCode){
                  case 65:
                  $("#user-id").val("A")
                  const audio_do = new Audio("./audio/1_do.wav")
                  audio_do.play()
                  break;
                  case 83:
                  $("#user-id").val("S")
                  const audio_re = new Audio("./audio/2_re.wav")
                  audio_re.play()
                  break;
                  case 68:
                  $("#user-id").val("D")
                  const audio_mi = new Audio("./audio/3_mi.wav")
                  audio_mi.play()
                  break;
                  case 70:
                  $("#user-id").val("F")
                  const audio_pa = new Audio("./audio/4_pa.wav")
                  audio_pa.play()
                  break;
                  case 71:
                  $("#user-id").val("G")
                  const audio_sol = new Audio("./audio/5_sol.wav")
                  audio_sol.play()
                  break;
                  case 74:
                  $("#user-id").val("J")
                  const audio_ra = new Audio("./audio/6_ra.wav")
                  audio_ra.play()
                  break;
                  case 75:
                  $("#user-id").val("K")
                  const audio_si = new Audio("./audio/7_si.wav")
                  audio_si.play()
                  break;
                  case 76:
                  $("#user-id").val("L")
                  const audio_do2 = new Audio("./audio/8_do.wav")
                  audio_do2.play()
                  break;
              }
          }
      })
복사했습니다!