앱 링크 : finger-organist.netlify.app
문제 제기
성당에서 미사 중 사용하는 공식 악기는 오르간이다.
4성부의 소리를 연주해서 사람들이 멜로디를 쉽게 따라부를 수 있도록 해준다.
피아노와 마찬가지로 건반 악기이기 때문에 피아노 연주자가 봉사하는 경우가 많다.
그러나 시골 성당에서는 피아노 연주자를 구하는 것도 쉽지 않아 무반주로 성가를 부를 때가 많다.
다른 봉사들과는 달리 악기 연주는 하루 아침에 배울 수 있는 게 아니라 더 그렇다.
이에 대한 해결방법으로 손가락 오르가니스트라는 앱을 기획했다.
오르간 연주는 익숙하지 않은 악보를 읽고 네 손가락으로 정확한 건반을 눌러야하기 때문에 어렵다.
만약 박자에 맞춰서 손가락 터치로만 연주를 할 수 있다면
박치가 아닌 이상 누구나 오르간 연주를 할 수 있게 된다.
미디라는 것이 이를 가능하게 한다.
미디 신호가 기록되어 있는 미디 파일은 컴퓨터가 읽을 수 있는 악보와 같다.
가톨릭 공식 웹인 굿뉴스에서 제공하는 미디 파일을 가져다가
클릭 할 때마다 다음 음표를 연주하는 식으로 코딩을 하면 실현할 수 있을 것 같았다.
해결 과정
먼저 웹에서 미디 파일을 불러올 수 있는 방법을 알아야 했다.
@tonejs/midi라는 라이브러리를 이용해서 미디 파일을 읽고
각 노트의 피치, 어떤 박자에 나오는 지 등의 정보를 얻을 수 있었다.
이를 바탕으로 웹의 audio 엘리먼트를 이용해서
각 노트에 해당하는 mp3 파일을 재생하도록 해
미디 파일에 맞는 성가를 연주할 수 있게 했다.
버튼을 클릭했을 때 현재 멜로디 연주를 멈추고 다음 멜로디를 연주하는 식으로 작동한다.
사용자는 멜로디의 리듬에 맞춰 버튼을 클릭하기만 하면 된다.
위의 핵심적인 기능이 어느 정도 작동한다는 것을 확인하고
레이아웃을 만들면서 필요한 모든 기능들의 목업을 만들었다.
성가를 검색하는 기능,
성가를 선택해서 홈 화면에 보여주는 기능,
가사를 클릭해서 자유롭게 전주의 위치를 설정할 수 있는 기능
등을 구현했다.
껍데기를 먼저 만들어 두니 어떤 것이 더 필요하고 부족한지 파악하기 쉬웠다.
마지막으로 클릭을 했을 때 연주가 되는 핵심적인 기능을 추가하면서
디테일한 기능들을 추가했다.
Web Audio API
프로젝트를 진행하면서 아쉬운 부분은 페이드아웃이다.
재생되는 소리를 멈춰야할 경우 바로 pause를 하면 심한 클릭 노이즈가 발생하는데
이를 방지하기 위해서 페이드아웃을 구현했다.
그러나 audio 엘리먼트만을 가지고서는 선형(linear)으로 볼륨을 줄일 수 없어
여전히 작은 클릭 노이즈가 페이드아웃에 남아 있다.
이 노이즈만 제거 할 수 있다면 실용적으로 쓸 수 있을 텐데
audio 엘리먼트의 pause가 파형이 0점에 닿는 zero-crossing에 맞춰 멈추게 한다든지의 기술을 제공해주지 않는다면 불가하다고 판단했다.
다행히 Web Audio API에서 해결 방법을 찾았다.
linearRampToValueAtTime 메소드를 이용해서 볼륨 값을 부드럽게 감소시켜 페이드아웃을 구현했다.