정보실

웹학교

정보실

javascript 일반 바닐라를 사용하여 자신의 피아노 키보드를 만드는 방법

본문

How to Build a Piano Keyboard Using Vanilla JavaScript 


연주 가능한 피아노 키보드를 만드는 것은 프로그래밍 언어를 배울 수 있는 좋은 방법이 될 수 있습니다. 

이 튜토리얼에서는 외부 라이브러리나 프레임 워크없이 바닐라 JavaScript를 사용하여 코딩하는 방법을 보여줍니다.


https://www.freecodecamp.org/news/javascript-piano-keyboard/ 


최종 제품을 먼저 확인하려면 JavaScript 피아노 키보드를 사용하십시오.


이 학습서에서는 함수 및 이벤트 처리와 같은 JavaScript 및 HTML 및 CSS에 대한 기본 지식이 있다고 가정합니다. 

그렇지 않으면, 그것은 완전히 초보자에게 친숙하며 프로젝트 기반 학습을 통해 JavaScript 기술을 향상시키고 싶거나 멋진 프로젝트를 만들고 싶은 사람들을 위해 준비되어 있습니다.


우리가 이 프로젝트를 위해 만들고 있는 피아노 키보드는 Keith William Horwood가 만든 동적으로 생성 된 합성 키보드를 기반으로 합니다. 

사용 가능한 키 수를 4 옥타브로 확장하고 새로운 키 바인딩을 설정합니다.


그의 키보드는 다른 악기의 사운드를 연주 할 수 있지만, 우리는 간단하게 피아노를 사용합니다.


이 프로젝트를 수행하기 위해 취할 단계는 다음과 같습니다.


1. Get Working Files 


이 학습서는 다음 파일을 사용합니다.

언급 한 바와 같이, 우리는 Keith가 만든 피아노 키보드의 베이스를 만들 것입니다. 

당연히 우리는 audiosynth.js에 친절하게 허락 한 코드를 빌릴 것입니다.


우리는 playKeyboard.js (모든 Keith 코드의 수정 된 버전)에 audiosynth.js를 통합하여 모든 JavaScript를 처리합니다. 

이 튜토리얼에서는 다음 파일에서 이 파일의 코드가 작동하는 피아노 키보드를 만드는 주요 요점에 대한 자세한 설명을 제공합니다.


audiosynth.js 파일은 사운드 생성에만 책임이 있으므로 그대로 두십시오.


이 파일의 코드는 사용자가 키를 누를 때 적절한 소리를 동적으로 생성하기 위해 Javascript를 사용하여 이 피아노 키보드를 온라인에서 찾은 다른 키보드와 구별합니다. 

따라서 코드는 외부 오디오 파일을 로드 할 필요가 없습니다.


Keith는 이미 자신의 웹 사이트에서 사운드 생성이 작동하는 방식에 대한 설명을 제공하므로 여기서 자세히 다루지 않습니다.


간단히 말해서 JS에서 Math.sin() 함수를 사용하여 정현파를 생성하고 변환하여 멋진 수학을 통해 실제 악기처럼 들리도록 합니다.


색인 HTML 파일을 작성하고 헤더의 JS 파일에 링크하십시오.


<script src="audiosynth.js"></script>
<script src="playKeyboard.js"></script>

본문에서 키보드 "컨테이너"로 사용할 빈 <div> 요소를 만들 수 있습니다.


<div id= “keyboard”></div>

JS를 사용하여 키보드를 만들 때 나중에 참조 할 수 있도록 ID 이름을 지정합니다. 본문에서도 JS 코드를 호출하여 JS 코드를 실행할 수 있습니다.


<script type="text/javascript">playKeyboard()</script>

우리는 playKeyboard.js를 하나의 큰 함수로 사용합니다. 

브라우저가 해당 코드 줄에 도달하자마자 실행되며 <div> 요소에서 완전히 작동하는 키보드를 생성합니다. id =“키보드”.


playKeyboard.js의 처음 몇 줄은 모바일 장치 기능 (선택 사항)을 설정하고 새 AudioSynth() 객체를 만듭니다. 

이 객체를 사용하여 이전에 연결 한 audiosynth.js의 메서드를 호출합니다. 

처음에는 이러한 방법 중 하나를 사용하여 사운드의 볼륨을 설정합니다.


11 번 라인에서 우리는 중간 C의 위치를 ​​4 번째 옥타브로 설정했습니다.


2. 키 바인딩 설정 


키보드를 생성하기 전에 몇 개의 키를 생성 할 것인지 결정하는 키 바인딩을 설정해야 합니다.


원래 'Für Elise'의 오프닝 음표를 연주하려고 했기 때문에 총 48 개의 흑백 건반에 대해 4 옥타브 범위를 선택했습니다. 

이것은 내 (PC) 키보드의 거의 모든 키를 필요로 했으며 더 적게 포함 시킬 수 있습니다.


경고 메모 : 최고의 키 바인딩이 없으므로 실제로 연주하려고 할 때 직관적이지 않을 수 있습니다. 

아마도 이것은 4 옥타브 키보드를 만들려고 하는 대가 일 것입니다.


키 바인딩을 설정하려면 먼저 키 코드를 키로 사용하고 메모를 키 값으로 재생하는 객체를 만듭니다 (15 행) :


var keyboard = {
	/* ~ */
	192: 'C,-2',
	/* 1 */
	49: 'C#,-2',
	/* 2 */
	50: 'D,-2',
	/* 3 */
	51: 'D#,-2',
    //...and the rest of the keys
}

주석은 사용자가 컴퓨터 키보드에서 누를 수 있는 키를 나타냅니다. 

사용자가 물결표 키를 누르면 해당 키 코드는 192입니다. 

keycode.info와 같은 도구를 사용하여 키 코드를 얻을 수 있습니다.


키 값은 'note, octave modifier'형식으로 연주되고 쓰여지는 음입니다. 

여기서, 옥타브 수정자는 중간 C를 포함하는 옥타브의 상대 옥타브 위치를 나타냅니다. 

예를 들어, 'C, -2'는 C 음입니다 중간 C 아래 2 옥타브


'평면'키는 없습니다. 모든 음표는‘날카로움’으로 표시됩니다.


피아노 건반을 작동 시키려면 키를 전환하는 리버스 룩업 테이블을 준비해야 합니다. 

연주 할 음이 키가되고 키 코드가 값이 되도록 하는 값 쌍.


키보드를 쉽게 생성하기 위해 음표를 반복하고 싶기 때문에 그러한 테이블이 필요합니다.


이제 까다로운 부분이 있습니다. 실제로 2 개의 역방향 조회 테이블이 필요합니다.


하나의 테이블을 사용하여 음표를 재생하기 위해 누르는 컴퓨터 키 (164 행에서는 reverseLookupText로 표시됨)에 대해 표시하려는 레이블을 찾고, 다른 하나는 누른 실제 키를 조회합니다 (165 행에서는 reverseLookup으로 선언). ).


잘 알려진 사람은 두 룩업 테이블이 키 코드를 값으로 가지고 있다는 것을 인식 할 수 있습니다.


키에 해당하는 키 코드를 얻고 해당 키 코드에서 String.fromCharCode() 메서드를 사용하려고 할 때 (나에게 알려지지 않은 이유로) 누른 키를 나타내는 동일한 문자열을 항상 다시 얻는 것은 아닙니다.


예를 들어 왼쪽 대괄호를 누르면 키 코드 219가 생성되지만 실제로 String.fromCharCode (219)를 사용하여 키 코드를 문자열로 다시 변환하려고 하면 "Û"이 반환됩니다. 

"["를 얻으려면 키 코드 91을 사용해야 합니다. 168 행에서 시작하는 잘못된 코드를 교체합니다.


올바른 키 코드를 처음 얻는 데 약간의 시행 착오가 있었지만 나중에 다른 함수 (getDispStr () 318 행)를 사용하여 올바른 문자열을 표시 할 수 있음을 깨달았습니다.


대부분의 키는 올바르게 작동하지만 더 작은 키보드로 시작하여 잘못된 키 코드를 처리하지 않아도 됩니다.


3. 키보드 생성 


209 번 줄에서 document.getElementById (‘keyboard’)가있는 <div> 요소 키보드 컨테이너를 선택하여 키보드 생성 프로세스를 시작합니다.


다음 줄에서 selectSound 객체를 선언하고 audioSynth.js가 피아노의 사운드 프로파일을로드하도록 value 속성을 0으로 설정합니다. 

다른 기기를 사용하려는 경우 다른 값 (0-3 일 수 있음)을 입력 할 수 있습니다. 

자세한 내용은 Synth.loadSoundProfile이있는 audioSynth.js의 233 행을 참조하십시오.


var 노트가있는 216 라인에서 audioSynth.js에서 1 옥타브 (C, C #, D… B)에 대해 사용 가능한 노트를 검색합니다.


각 옥타브를 반복 한 다음 해당 옥타브의 각 음을 반복하여 키보드를 생성합니다. 

각 노트마다 document.createElement (‘div’)를 사용하여 적절한 키를 나타내는 <div> 요소를 만듭니다.


검은 색 또는 흰색 키를 만들어야 하는지 구별하기 위해 메모 이름의 길이를 봅니다. 

예리한 부호를 추가하면 문자열의 길이가 검은 색 키를 나타내며 그 반대의 경우 흰색을 나타내는 1보다 큽니다 (예 :‘C #’).


각 키에 대해 키 위치를 기준으로 왼쪽에서 너비, 높이 및 오프셋을 설정할 수 있습니다. 

나중에 CSS와 함께 사용할 적절한 클래스를 설정할 수도 있습니다.


다음으로, 음표를 연주하고 다른 <div> 요소에 저장하기 위해 눌러야 하는 컴퓨터 키로 키에 레이블을 붙입니다. 

reverseLookupText가 유용한 곳입니다. 

동일한 <div> 안에 메모 이름도 표시됩니다. 

레이블의 innerHTML 속성을 설정하고 키에 레이블을 추가하여 (240-242 행)이 모든 작업을 수행합니다.


label.innerHTML = '<b class="keyLabel">' + s + '</b>' + '<br /><br />' + n.substr(0,1) + 
'<span name="OCTAVE_LABEL" value="' + i + '">' + (__octave + parseInt(i)) + '</span>' + 
(n.substr(1,1)?n.substr(1,1):'');

마찬가지로 마우스 클릭을 처리하기 위해 키에 이벤트 리스너를 추가합니다 (244 행).


thisKey.addEventListener(evtListener[0], (function(_temp) { return function() { fnPlayKeyboard({keyCode:_temp}); } })(reverseLookup[n + ',' + i]));

첫 번째 매개 변수 evtListener[0]은 7 행에서 훨씬 앞서 선언 된 mousedown 이벤트입니다. 

두 번째 매개 변수는 함수를 반환하는 함수입니다. 

올바른 키 코드를 얻으려면 reverseLookup이 필요하며 해당 값을 매개 변수 _temp로 내부 함수에 전달합니다. 

실제 키 다운 이벤트를 처리하기 위해 reverseLookup이 필요하지 않습니다.


이 코드는 ES2015 이전 (일명 ES6)이며 업데이트 되고 더 명확하게 동등한 코드는 다음과 같습니다.


const keyCode = reverseLookup[n + ',' + i];
thisKey.addEventListener('mousedown', () => {
  fnPlayKeyboard({ keyCode });
});

필요한 모든 건반을 생성하고 키보드에 추가 한 후, 실제 음표 연주를 처리해야 합니다.


4. 키 누름 처리 


260 행의 fnPlayKeyboard 기능을 사용하여 사용자가 키를 클릭하거나 해당 컴퓨터 키를 누를 때와 동일한 방식으로 키 누름을 처리합니다. 

유일한 차이점은 addPressListener에서 키 누름을 감지하는 데 사용하는 이벤트 유형입니다.


206 행에서 keysPressed라는 배열을 설정하여 어떤 키를 누르거나 클릭했는지 감지합니다. 

간단히 하기 위해, 우리는 누르는 키가 클릭되는 것을 포함 할 수 있다고 가정 할 것이다.


키 누름 처리 프로세스를 3 단계로 나눌 수 있습니다. 

누른 키의 키 코드를 keysPressed에 추가, 적절한 음표 연주 및 keysPressed에서 키 코드 제거.


키 코드를 추가하는 첫 단계는 쉽습니다.


keysPressed.push(e.keyCode);

여기서 e는 addEventListener에 의해 감지 된 이벤트입니다.


추가 된 키 코드가 할당 한 키 바인딩 중 하나 인 경우 304 번 라인에서 fnPlayNote()를 호출하여 해당 키와 관련된 메모를 재생합니다.


fnPlayNote()에서 먼저 audiosynth.js의 generate() 메소드를 사용하여 메모에 대한 새로운 Audio() 요소 컨테이너를 만듭니다. 

오디오가 로드 되면 음을 연주 할 수 있습니다.


308-313 행은 레거시 코드이며 container.play()로 대체 할 수 있는 것처럼 보이지만 차이점은 무엇인지 확인하기 위한 광범위한 테스트를 수행하지 않았습니다.


298 행의 스플 라이스 메서드를 사용하여 keysPressed 배열에서 키를 제거 할 수 있으므로 키 누름 제거도 매우 간단합니다. 

자세한 내용은 fnRemoveKeyBinding()이라는 함수를 참조하십시오.


우리가 주의해야 할 것은 사용자가 키 또는 여러 키를 누르고 있을 때입니다. 

건반을 누르고 있는 동안 음표가 한 번만 연주되도록해야합니다 (262-267 행).


var i = keysPressed.length;
while(i--) {
	if(keysPressed[i]==e.keyCode) {
		return false;	
    }
}

false를 반환하면 나머지 fnPlayKeyboard()가 실행되지 않습니다.


요약 


우리는 바닐라 JavaScript를 사용하여 모든 기능을 갖춘 피아노 키보드를 만들었습니다!


요약하면 다음과 같이했습니다.


1. 적절한 JS 파일을 로드하고 실행하도록 인덱스 HTML 파일을 설정했습니다. 

키보드를 생성하고 작동 시키려면 <body>의 playKeyboard()를 사용하십시오. 

키보드에 페이지가 표시되는 id = "keyboard"인 <div> 요소가 있습니다.


2. JavaScript 파일 playKeyboard.js에서 키 코드를 키로, 음표를 값으로 사용하여 키 바인딩을 설정합니다. 

또한 하나는 노트를 기반으로 적절한 키 레이블을 찾고 다른 하나는 올바른 키 코드를 찾는 데 사용되는 두 개의 역방향 조회 테이블을 만듭니다.


3. 각 옥타브 범위의 모든 음을 반복하여 키보드를 동적으로 생성합니다. 

각 키는 자체 <div> 요소로 작성됩니다. 

리버스 조회 테이블을 사용하여 키 레이블과 올바른 키 코드를 생성합니다. 

그런 다음 mousedown의 이벤트 리스너는 이를 사용하여 fnPlayKeyboard()를 호출하여 메모를 재생합니다. 

그만큼 keydown 이벤트는 동일한 함수를 호출하지만 키 코드를 가져 오기 위해 역방향 조회 테이블이 필요하지 않습니다.


4. 마우스 클릭 또는 컴퓨터 키 누름으로 발생하는 키 누름을 3 단계로 처리합니다. 

누른 키의 키 코드를 배열에 추가하고 적절한 음표를 연주하고 해당 배열에서 키 코드를 제거합니다. 

사용자가 키를 계속 누르고 있는 동안 처음부터 반복해서 음표를 연주하지 않도록주의해야합니다.


키보드가 이제 완전히 작동하지만 약간 둔하게 보일 수 있습니다. CSS 부분은 당신에게 맡길 것입니다 😊


다시, 여기 참조 용으로 만든 JavaScript 피아노 키보드가 있습니다.



페이지 정보

조회 96회 ]  작성일20-02-29 17:46

웹학교