index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Launchpad</title>
    <meta charset="utf-8" />
    <link href="css/styles.css" rel="stylesheet" />
  </head>

  <body>
    <div class="pad">
      <img src="images/pad.png" width="700" height="570">
      <button id="play-btn">
        <img src="images/play.png" width="50" height="50">
      </button>
      <button id="stop-btn">
        <img src="images/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 audioFile = new Audio("audio/loop.mp3"); // 오디오 객체 생성
        
      function playMusic(){
          //함수 생성 후, 플레이 기능 추가
          audioFile.play();
      }
      function stopMusic(){
          //음악 정지 기능ㄴ 추가
          audioFile.pause();
          audioFile.currentTime = 0; // '멈춤' 버튼을 누른 후에는 오디오의 시작 지점을 처음으로 다시 돌려주기.
      }
      
      //플레이 버튼 클릭시 음악 나오도록 버튼기능 구현
      $('#play-btn').on('click', playMusic);
      $('#stop-btn').on('click', stopMusic);
        
        var AudioFiles=[];
        var audio1 = new Audio('audio/01_kick_drum.wav');
        var audio2 = new Audio('audio/02_closed_hihat.wav');
        var audio3 = new Audio('audio/03_open_hihat.wav');
        var audio4 = new Audio('audio/04_clap.wav');
        var audio5 = new Audio('audio/05_snap.wav');
        var audio6 = new Audio('audio/06_crash.wav');
        var audio7 = new Audio('audio/07_tom1.wav');
        var audio8 = new Audio('audio/08_tom2.wav');
        var audio9 = new Audio('audio/09_tambourine.wav');
        AudioFiles.push(audio1);
        AudioFiles.push(audio2);
        AudioFiles.push(audio3);
        AudioFiles.push(audio4);
        AudioFiles.push(audio5);
        AudioFiles.push(audio6);
        AudioFiles.push(audio7);
        AudioFiles.push(audio8);
        AudioFiles.push(audio9);
        console.log(AudioFiles);
               
        $(document).on('keydown',KeyDown);
        function KeyDown(event){
            if(Number(event.key)>=1 && Number(event.key)<=9){
                $('#cell' + event.key).addClass('playing');
                console.log(Number(event.key)-1);
                var drumSound = AudioFiles[Number(event.key)-1];
                drumSound.currentTime = 0;
                drumSound.play();
                //var AUDIO = AudioFiles[Number(event.key) - 1];
                //console.log(Number(event.key));
            }                
        }
        
        $(document).on('keyup',KeyUp);
        function KeyUp(event){
            $('.cell').removeClass('playing');
        }
    </script>
  </body>
</html>

css/styles.css

* {
  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;
}

안녕하세요.

드림 시퀀서 pt.3를 풀다가 궁금한게 있어서 질문올립니다.

index.html 파일에서 중간 부분에 AudioFiles에 push함수로 하나하나 배열에 입력해주고 있는데,

이를 반복문을 통해 한번에 입력이 불가능한가요?

로그를 보면서 여러번 시도를 해보았는데, 변수로만 입력이 가능하고 변수의 내용(오디오 객체)을 넣는 것이 잘 안되네요..