클릭한 키보드 값을 받아온다. 이 때 우리는 아스키 코드로 각 키에 기능을 부여할 수 있다.
아래는 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;
}
}
})
'공부 > JavaScript' 카테고리의 다른 글
[React] 리액트 프로젝트 생성 (0) | 2022.03.16 |
---|---|
[NodeJS] Node.js 설치와 yarn 설치 (0) | 2022.03.16 |
[Jquery] scroll, focus, blur (0) | 2022.02.19 |
[Jquery] on 메서드, hover 메서드 (0) | 2022.02.18 |
[Jquery] addClass, removeClass, hasClass, toggleClass (0) | 2022.02.17 |