분홍분홍 코딩 프로젝트

Drum kit 본문

옛 포스트/Project

Drum kit

봄나물소녀 2021. 3. 1. 23:30

만들고 싶은 것

  • 태그를 오디오 파일과 연결
  • 키를 눌렀을 때 css효과 주기
  • css효과 없애기

 

html

  • data-key : div와 audio를 하나로 묶어주는 속성 (자판 별 key값은 keycode.info에서 확인)
  • kbd :  키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낸다.
<body>
    <div class="keys">
      <div data-key="65" class="key">
        <kbd>A</kbd>
        <span class="sound">clap</span>
      </div>

      <div data-key="83" class="key">
        <kbd>S</kbd>
        <span class="sound">hihat</span>
      </div>
      <div data-key="68" class="key">
        <kbd>D</kbd>
        <span class="sound">kick</span>
      </div>
      <div data-key="70" class="key">
        <kbd>F</kbd>
        <span class="sound">openhat</span>
      </div>
      <div data-key="71" class="key">
        <kbd>G</kbd>
        <span class="sound">boom</span>
      </div>
      <div data-key="72" class="key">
        <kbd>H</kbd>
        <span class="sound">ride</span>
      </div>
      <div data-key="74" class="key">
        <kbd>J</kbd>
        <span class="sound">snare</span>
      </div>
      <div data-key="75" class="key">
        <kbd>K</kbd>
        <span class="sound">tom</span>
      </div>
      <div data-key="76" class="key">
        <kbd>L</kbd>
        <span class="sound">tink</span>
      </div>
    </div>

    <audio data-key="65" src="sounds/clap.wav"></audio>
    <audio data-key="83" src="sounds/hihat.wav"></audio>
    <audio data-key="68" src="sounds/kick.wav"></audio>
    <audio data-key="70" src="sounds/openhat.wav"></audio>
    <audio data-key="71" src="sounds/boom.wav"></audio>
    <audio data-key="72" src="sounds/ride.wav"></audio>
    <audio data-key="74" src="sounds/snare.wav"></audio>
    <audio data-key="75" src="sounds/tom.wav"></audio>
    <audio data-key="76" src="sounds/tink.wav"></audio>
  </body>

Javascript

  • window 객체에서 key가 눌렸을 때 함수 실행(audio play + css효과)
  • key에 변형이 일어났을 때 각각의 key에 변형을 없애는 함수 실행.
 <script>
    window.addEventListener("keydown", function (e) {
      // event관련 object를 받는 argument
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
      const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
      if (!audio) return; // 만약 데이터키를 가진 오디오가 아니라면 함수 종료.stop the function from running all together
      audio.currentTime = 0; // 음악의 현재 위치(초 단위), rewind to the start
      audio.play();
      key.classList.add("playing");
    });

    function removeTransition(e) {
      // event 관련 object를 받는 argument
      if (e.propertyName !== "transform") return; // skip it if property name of event is not a transform
      this.classList.remove("playing");
    }

    const keys = document.querySelectorAll(".key");
    keys.forEach((key) =>
      key.addEventListener("transitionend", removeTransition)
    );
  </script>

CSS

  • transition : 전환 효과, 지속 시간; 
    *hover을 이용해 길이 연장, 단축되는 시간 조절 가능. 
  • transform : scale(1.5) => 1.5배 커지는 효과
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background: url(sounds/sketch.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.keys {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 50%;
}

.key {
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 2px solid black;
  padding: 1rem, 0.5rem;
  border-radius: 10px;
  font-size: 50px;

  width: 200px;
  color: whitesmoke;
  background-color: rgba(0, 0, 0, 0.4);
  text-shadow: 0px 0 10px black;
  transition: all 0.09s;
}

.playing {
  transform: scale(1.5);
  border-color: orange;
  box-shadow: 0 0 20px yellowgreen;
}

kbd {
  font-size: 100px;
}

 

'옛 포스트 > Project' 카테고리의 다른 글

[TIL] Momentum-dash 이슈  (0) 2021.11.29
Chrome Web - Getting current weather and location  (0) 2021.02.27
Image slider Lv.2  (0) 2021.02.25
Image slider Lv.1  (0) 2021.02.24
Chrome web - Random Background image  (0) 2021.02.24
'옛 포스트/Project' Related Articles more