[javascript독학] Loopstation app 만들기

이전에 만들었던 Music App을 Loopstation으로 응용해보았습니다!

Music App을 만들면서 이것저것 시도하다 보니 Loopstation에 대한 아이디어가 번뜩 떠올라 시도하게 됐습니다. ㅎㅎ

앱의 순서를 우선 보시면

1. Record 버튼을 눌러 녹음 시작
2. 음이 담긴 A, S, D, F, G 키를 눌러 연주
3. Stop 버튼을 눌러 녹음 정지 및 다운로드, 그리고 녹음된 음원 중복 재생
4. reset 버튼을 통해 중복 재생 정지

입니다.

 

HTML&CSS

HTML과 CSS는 Music App에 기반됐습니다. Music App에서 추가적으로 녹음 시작 버튼, 중지 버튼, 리셋 버튼 그리고 녹음 경과 시간을 표시해주는 부분에 대한 p태그 이렇게 새로 추가되었습니다. 음원 장착 부분은 위에 링크된 Music App을 참고해 주세요! 

 

Javascript

우선 추가된 버튼을 document.querySelector로 받아오고 click event를 추가해 줍니다. record부분은 처음 봐서 어려웠습니다. 우선 getUserMedia를 통해 record 권한을 받습니다. 그래서 start 버튼을 누르면 MediaRecorder 생성자가 만들어지고 mediaRecorder 변수에 담습니다.

여기서 mediaRecorder.start()를 하면 녹음이 시작되고 mediaRecorder.stop()을 하면 녹음을 중지합니다. 따라서 start 버튼을 누르면 mediaRecorder.start()가 실행되면서 녹음이 시작되고 경과 시간은 Date() 함수를 통해 시작시간을 고정시키고 Interval을 통해 현재 시간을 계속 업데이트해주어 두 시간 간격으로 경과시간을 나타내었습니다.

record 가 stop 되면 stop이벤트를 추가하여 record 된 데이터를 Blob에 담아 URL에 담고 audio 생성자에 담아 play()를 통해 실행시킵니다.

초보자인 제게 MediaRecorder는 어려웠습니다. 구글에 검색하고 동작원리를 익히는데도 시간이 좀 걸렸네요 ㅎㅎ 원래 만든 앱을 URL 따서 보급 루프스테이션으로 배포하려고 했지만 만들고 나니 두 가지 큰 문제가 있더라고요.

 

우선 첫 번째 녹음하고 재생시키면서 두 번째 음을 쌓으면 잘 작동합니다. 그런데 시간이 지날수록 두 음의 시작시간이 달라지면서 분리됩니다. 소리를 한 mp3 파일에 새로 저장했는데 두 음이 나뉘는 게 신기하네요.. 음이 겹치면 한 음으로 인식돼야 하는데 다른 음원을 재생시킨 것처럼 두 개로 나뉘어 버립니다. 이 부분 더 알아봐야 할 듯합니다.

 

두 번째 문제는 스피커에서 나온 소리를 마이크로 받다 보니 노이즈가 발생합니다. 장비로 해결할 수 있겠지만 FFT (Fast Fourier Transform)을 통해서 어느 정도 해결 가능해 보입니다. 한번 완벽히 만들 겸 공부해서 적용시켜봐야겠습니다 ㅎㅎ

 

오래간만에 수학 공부하는 느낌이 들었네요. 기본 원리 가지고 여러 응용 예제를 풀어보면서 지식을 확장해나가는 부분이 배움에 재미를 느끼게 해 줍니다. 앞으로 많은 앱을 만들어보겠습니다.

 

이상입니다!

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

모바일은 여기로!