프로젝트 1: 자바스크립트 DrumKit
내 이전 기사에서 언급했듯이. Wes Bos Javascript30 course 의 Day 1 챌린지 입니다.
최종 결과는 다음과 같습니다.
시작하기 전에 항상 그렇듯이 here 에서 시작 파일을 다운로드하십시오. 스타터 파일을 다운로드하는 방법에 대한 별도의 기사를 작성했는데 확인하실 수 있습니다.
파트 1:HTML
<body>
<div class="container">
<div class="bg-wrap">
<img class="bg-image" src="background.jpg">
</div>
<table>
<tr>
<td class="drum-key"><button value="65">A <span>Clap</span></button></td>
<td class="drum-key"><button value="83">S <span>Hihat</span></button></td>
<td class="drum-key"><button value="68">D <span>Kick</span></button></td>
<td class="drum-key"><button value="70">F <span>OpenHat</span></button></td>
<td class="drum-key"><button value="71">G <span>Boom</span></button></td>
<td class="drum-key"><button value="72">H <span>Ride</span></button></td>
<td class="drum-key"><button value="74">J <span>Snare</span></button></td>
<td class="drum-key"><button value="75">K <span>Tom</span></button></td>
<td class="drum-key"><button value="76">L <span>Tink</span></button></td>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
여기서 주의할 점은 버튼의 값을 드럼 키에 언급된 문자의 ASCII 값으로 지정했다는 것입니다. 1개의 행이 있는 테이블을 만들었으며 각 데이터 셀은 버튼입니다.
파트 2: CSS
이제 우리는 프로젝트의 스타일을 지정할 것입니다.
*{
margin: 0;
padding:0;
}
body{
overflow: hidden;
}
.container{
position: relative;
}
.bg-image{
background: url('background.jpg') center;
opacity: 0.7;
position: absolute;
top:0;
bottom:0;
width:100%;
height:auto;
z-index:-1;
position: relative;
}
table{
margin-left: auto;
margin-right: auto;
position: absolute;
top: 55%;
z-index:2;
}
table td button{
width:3.5em;
height:3em;
font-size:2rem;
color: white;
background: transparent;
border:2px solid black;
transition: all 0.06s;
margin:1rem;
}
table td button span{
font-size: 1rem;
color:gold;
display: block;
}
.bright{
border: 2px solid gold;
box-shadow: 0px 3px gold;
transform: scale(1.2);
}
여기서는 사운드가 재생될 때 bright 클래스가 호출됩니다. 이 기사는 주로 자바스크립트에 초점을 맞추므로 css 설명 부분은 깊게 다루지 않겠습니다. 끝까지 읽어보시고 제안 사항이나 의심 사항이 있으면 아래에 자유롭게 의견을 말하십시오.
파트 3:자바스크립트
이제 프로젝트를 대화형으로 만들 것입니다.
따라서 이 프로젝트의 아이디어는 다음과 같은 경우 소리를 재생하는 것입니다.
버튼에 언급된 키가 키보드에서 눌림:
여기서는 이벤트 리스너 키다운을 사용합니다. keyCode를 사용하여 사용자가 키를 눌렀는지 확인합니다. 그런 다음 해당 사운드를 재생하는 함수에 전달합니다.
커서를 사용하여 버튼을 클릭합니다.
여기서는 이벤트 리스너 클릭을 사용하여 클릭한 버튼의 값을 얻은 다음 사운드를 재생하는 함수에 전달합니다.
오디오 변수 초기화 -->
let clap= new Audio('sounds/clap.wav');
let boom= new Audio('sounds/boom.wav');
let hihat= new Audio('sounds/hihat.wav');
let kick= new Audio('sounds/kick.wav');
let openhat= new Audio('sounds/openhat.wav');
let ride= new Audio('sounds/ride.wav');
let snare= new Audio('sounds/snare.wav');
let tink= new Audio('sounds/tink.wav');
let tom= new Audio('sounds/tom.wav');
이제 위에서 설명한 대로 사례를 해결합니다.
let keys=document.getElementsByClassName('drum-key');
for(let key of keys){
//This will play sound when any key is pressed
key.addEventListener('keydown',(e)=>{
//******adding bright class*****
//will call button having keycode as value.
let keyboardvalue=document.querySelector(`button[value="${e.keyCode}"]`);
//if any non displayed key is pressed.
if(keyboardvalue)
keyboardvalue.classList.add('bright');
playSound(e.keyCode);
//since transitioning is already a time bound property, using another time bound function is not recommended.
// setTimeout(()=>
// {keyboardvalue.classList.remove('bright');
// },500);
})
//*******to remove bright class*******
// we will use property transitionend.
key.addEventListener('transitionend',(e1)=>{
//since transitionend triggers every time transition is made i.e. for change in borders etc. as well , we are returning if transitionend is not triggered for property transform.
if(e1.propertyName!='transform') return;
e1.target.classList.remove('bright');
})
//******when button is clicked****
key.addEventListener('click',(e2)=>{
console.log(e2.target.value);
if(e2.target.value)
{playSound(parseInt(e2.target.value));
//Value data type is string so we will convert it to integer as switch case takes integer as parameter.
e2.target.classList.add('bright');}
})
}
이제 키의 ASCII 값을 매개변수로 사용하고 스위치 케이스를 사용하여 해당 사운드를 재생하는 playSound 함수를 생성합니다.
function playSound(ch){
switch(ch)
{
case 65: {clap.currentTime=0;
//if one audio is playing then same audio will not play again as function is already running. to prevet this we et currenttime=0.
clap.play();}
break;
case 83: hihat.currentTime=0;
hihat.play();
break;
case 68: kick.currentTime=0;
kick.play();
break;
case 70: openhat.currentTime=0;
openhat.play();
break;
case 71: boom.currentTime=0;
boom.play();
break;
case 72: ride.currentTime=0;
ride.play();
break;
case 74: snare.currentTime=0;
snare.play();
break;
case 75: tom.currentTime=0;
tom.play();
break;
case 76: tink.currentTime=0;
tink.play();
break;
}
}
전체 코드를 이해하셨기를 바랍니다.
소스 코드: Click here
내가 배운 것들
1.keydown 이벤트 리스너.
2.transitionend 이벤트 리스너.
3.변환 및 전환.
4. 전환과 함께 setTimeout 기능을 사용하는 대신.
5. 이미 해당 오디오에 대해 play() 함수가 실행되고 있는 경우에도 오디오를 다시 재생하는 방법.
이 시리즈의 이전 기사::
결론
오늘의 프로젝트는 여기까지입니다. 다음 프로젝트는 알람 시계입니다.
의심 사항이나 제안 사항이 있으면 의견 섹션에 알려주십시오. 기꺼이 당신과 소통하겠습니다.
이 시리즈가 마음에 들고 그 일부가 되고 싶다면
읽어 주셔서 감사합니다. :)
Reference
이 문제에 관하여(프로젝트 1: 자바스크립트 DrumKit), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/prachigarg19/project-1-javascript-drumkit-3b06텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
