[javascript독학] Music App 만들기

이번에는 'Dev Ed' 유튜브에 있는 내용 중 Javascirpt Tutorial 중 하나인 Build A Mysic App With Javascript 를 진행하였습니다.

각 버튼을 누르면 사전에 저장해 놓은 소리가 나면서 간단한 jump animation 이 실행되는 예제입니다. 음이 들어간 예제를 해보니 더 재미있고 어떤 방향의 애플리케이션을 만들어 봐야겠다는 생각까지 들게 되네요!

 

HTML

HTML 구성은 매우 간단합니다. header에 h1 tag와 p tag 만 사용하여 간단하게 구성하였습니다. 그리고 각 버튼은 div를 이용하여 구성하고 div 안에 재생할 음악을 audio에 담습니다. 

CSS

공이 튀어 오르는 animation CSS는 @keyframes jump {}를 이용합니다. animation 진행도를 나누어 원하는 위치를 부여합니다. 

 

ex)

Javascript

버튼용 div에 chlick event를 줍니다. 본 실습에서는 각 버튼에 click event를 주지 않고 큰 div안에 다 묶어놓고 forEach로 진행하였습니다. 각 버튼에 audio까지 들어있으므로 audio만 따로 document.querySelectroAll을 하게 되면 Array 형태로 mp3 파일이 들어가 있는데 index를 이용하여 각 버튼에 맞는 sound를 집어넣어줍니다. forEach 또한 index 순으로 각 버튼에 함수를 지정하므로 sound에 index 부여하는 것이 가능하게 됩니다.

이제 각 버튼을 누르면 공이 튀어 오르는 animation을 부여합니다. animation은 style.animation='jump 1s ease'를 통해 1초 동안 ease의 강도로 jump 하는 animation을 부여합니다.

 

 

이렇게 Music App을 만들어 보았습니다. 추가적으로 클릭이 아니라 keyboard 입력으로 소리를 낼 수 있지 않을까 해서 예제를 변형해 보았습니다.

document.addEventListener('keydown', function(){}) 을 이용하여 각 키가 어떤 값을 갖는지 확인 후 그 값을 누르면 저장한 음이 나오게 했습니다. event.keyCode를 console.log에 출력하여 if 문을 통해 완성을 했네요.

 

이렇게 예제를 변형하다 보니 저만의 루프 스테이션을 만들어보고 싶어 졌습니다. 각 소리를 연주하고 저장하고 그 연주에 다른 연주를 쌓아가는 방식의 루프 스테이션은 이 예제를 응용하면 충분히 만들 수 있을 것 같습니다. 한번 만들어보고 무료 루프스테이션 앱을 배포해 봐야겠네요!

더 많은 정보와 리뷰를 원하시면 여기로!

모바일은 여기로!