Front-end/jQuery

[jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서

Dev다D 2021. 2. 19. 15:19
반응형

드럼 시퀀서 III

 

마지막 파트에서는:

  1. 키보드로 1에서 9까지의 숫자를 누르면 해당 드럼 소리가 나도록 해주세요.
  2. 같은 버튼을 빠르게 여러 번 눌러도 소리가 끊어지지 않아야 합니다. 누를 때마다 매번 드럼 소리를 처음부터 재생해주세요.
  3. 숫자 1에서 9까지가 아닌 다른 값을 입력하면 무시되어야 합니다. 예를 들어서 키보드로 q를 입력하면 오류도 나지 않고, 다른 특별한 동작도 없어야 합니다.

 

소리가 녹화되지 않아서 아쉽다. 모든 버튼이 다 다른 소리가 나게 구성되어있다.

 

<!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 audioFiles = [];

    audioFiles.push(new Audio("../Ex0402/audio/01_kick_drum.wav"));
    audioFiles.push(new Audio("../Ex0402/audio/02_closed_hihat.wav"));
    audioFiles.push(new Audio("../Ex0402/audio/03_open_hihat.wav"));
    audioFiles.push(new Audio("../Ex0402/audio/04_clap.wav"));
    audioFiles.push(new Audio("../Ex0402/audio/05_snap.wav"));
    audioFiles.push(new Audio("../Ex0402/audio/06_crash.wav"));
    audioFiles.push(new Audio("../Ex0402/audio/07_tom1.wav"));
    audioFiles.push(new Audio("../Ex0402/audio/08_tom2.wav"));
    audioFiles.push(new Audio("../Ex0402/audio/09_tambourine.wav"));


    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){
        if (Number(event.key) >= 1 && Number(event.key) <= 9) {
            $('#cell' + event.key).addClass('playing');
            var cur = audioFiles[Number(event.key) - 1];
            cur.currentTime = 0;
            cur.play();
        }

    $(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 활용하기] 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

'Front-end/jQuery'의 다른글

  • 현재글[jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서

관련글

티스토리툴바