반응형
드럼 시퀀서 I
요즘의 음악 트렌드를 따라가기 위해 비트메이킹을 배워보려고 합니다. 하지만 '런치패드'를 살 돈이 없기 때문에 자바스크립트로 대안을 만들 건데요.
우선 만들려고 하는 사이트의 완성본을 살펴보세요. 오른쪽에는 루프 음원을 실행할 수 있는 '재생 버튼'과 '정지 버튼'이 있고, 키보드로 숫자 1에서 9까지 입력하면 해당 드럼 소리가 재생됩니다.
과제를 세 파트로 나누어 진행해볼게요.
이번 첫 번째 파트에서는:
- #play-btn을 누르면 loop.mp3 파일이 실행되어야 합니다.
- #stop-btn을 누르면 loop.mp3 파일이 멈추고, 다시 음원의 처음으로 돌아가야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>Launchpad</title>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="pad">
<img src="pad.png" width="700" height="570">
<button id="play-btn">
<img src="play.png" width="50" height="50">
</button>
<button id="stop-btn">
<img src="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;
});
</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 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
|---|---|
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |