반응형
드럼 시퀀서 II
두 번째 파트에서는:
- 키보드로 숫자 1에서 숫자 9를 누르면 해당 'cell'에 'playing' 클래스가 추가되어야 합니다. 예를 들어서 숫자 1을 누르면 #cell1에 'playing' 클래스가 추가되고, 5을 누르면 #cell5에 'playing' 클래스가 추가되는 거죠.
- 키보드에서 손을 떼면 모든 'cell'에서 'playing' 클래스를 없애줘야 합니다.
- 아직 드럼 소리는 넣지 마세요.
<!DOCTYPE html>
<html>
<head>
<title>Launchpad</title>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="pad">
<img src="../Ex0402/pad.png" width="700" height="570">
<button id="play-btn">
<img src="../Ex0402/play.png" width="50" height="50">
</button>
<button id="stop-btn">
<img src="../Ex0402/stop.png" width="50" height="50">
</button>
<div class="cell-container">
<div class="cell green" id="cell1">
<div class="key">1</div>
<div class="instrument">Kick</div>
</div>
<div class="cell blue" id="cell2">
<div class="key">2</div>
<div class="instrument">Closed<br>Hi-hat</div>
</div>
<div class="cell blue" id="cell3">
<div class="key">3</div>
<div class="instrument">Open<br>Hi-hat</div>
</div>
<div class="cell red" id="cell4">
<div class="key">4</div>
<div class="instrument">Clap</div>
</div>
<div class="cell red" id="cell5">
<div class="key">5</div>
<div class="instrument">Snap</div>
</div>
<div class="cell blue" id="cell6">
<div class="key">6</div>
<div class="instrument">Crash</div>
</div>
<div class="cell green" id="cell7">
<div class="key">7</div>
<div class="instrument">Tom 1</div>
</div>
<div class="cell green" id="cell8">
<div class="key">8</div>
<div class="instrument">Tom 2</div>
</div>
<div class="cell blue" id="cell9">
<div class="key">9</div>
<div class="instrument">Tambourine</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
var loop = new Audio('audio/loop.mp3')
$('#play-btn').on('click', function() {
loop.play();
});
$('#stop-btn').on('click', function() {
loop.pause();
loop.currentTime = 0;
});
$(document).on('keydown', function(event){
$('#cell' + event.key).addClass('playing');
});
$(document).on('keyup', function() {
$('.cell').removeClass('playing');
});
</script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Helvetica";
background-color: #090910;
}
.pad {
width: 700px;
height: 570px;
margin: 100px auto;
position: relative;
}
.pad #play-btn {
position: absolute;
top: 70px;
right: 50px;
padding: 0;
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
}
.pad #stop-btn {
position: absolute;
top: 140px;
right: 50px;
padding: 0;
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
}
.cell-container {
width: 360px;
height: 360px;
left: 105px;
top: 100px;
position: absolute;
}
.cell {
width: 100px;
height: 100px;
color: #4A4A4A;
font-size: 16px;
float: left;
margin: 10px;
text-align: center;
border-radius: 4px;
}
.cell .key {
border: 2px solid #4A4A4A;
border-radius: 50%;
width: 40px;
height: 40px;
margin: 8px auto;
line-height: 40px;
font-weight: 500;
}
.cell .instrument {
width: 80px;
white-space: nowrap;
margin: 0 auto;
font-weight: 500;
}
.cell.green {
background-color: #87E682;
}
.cell.blue {
background-color: #2DBAF2;
}
.cell.red {
background-color: #FB718C;
}
.cell.green.playing {
background-color: rgba(135, 230, 130, 0.2);
color: #87E682;
border: 2px solid #87E682;
}
.cell.green.playing .key {
border: 2px solid #87E682;
}
.cell.blue.playing {
background-color: rgba(45, 186, 242, 0.2);
color: #2DBAF2;
border: 2px solid #2DBAF2;
}
.cell.blue.playing .key {
border: 2px solid #2DBAF2;
}
.cell.red.playing {
background-color: rgba(251, 113, 140, 0.2);
color: #FB718C;
border: 2px solid #FB718C;
}
.cell.red.playing .key {
border: 2px solid #FB718C;
}
본 내용은 Codeit의 'jQuery' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > jQuery' 카테고리의 다른 글
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
|---|---|
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |