GROOVIX

1996년, 롤랜드가 MC-303이라는 작은 상자를 내놓았습니다. 프리셋 소리 448개가 든 음원과 8트랙 시퀀서, TR-808과 TR-909를 바탕으로 한 드럼 키트를 한 몸에 넣고, 음악이 흐르는 동안 손잡이를 돌려 소리를 바로 바꿀 수 있게 만든 기계였습니다. 롤랜드는 이 상자를 그루브박스라고 불렀고, MC-303은 그 이름을 단 첫 기계가 되었습니다.

GROOVIX는 그루브박스를 브라우저 안에 다시 만든 것입니다. 설치할 것이 없고, 처음 여는 사람도 예시 믹스를 고르고 PLAY만 누르면 곡이 흘러나옵니다. 거기서 멜로디 트랙의 악기를 신스에서 색소폰으로 바꾸고, 비트 칸을 몇 개 켜고 끄고, 건반으로 멜로디를 얹어 보면 신디사이저가 무슨 일을 하는지, 곡 하나가 어떤 층으로 쌓여 있는지가 손에 잡힙니다.

무엇을 해 볼 수 있나요

• 예시 믹스 26곡. 장르 8곡(딥 하우스, 로파이 힙합, 신스웨이브, 애시드 테크노, 8비트 게임, 어쿠스틱 팝, 영화 음악, 개러지 록), 재즈 6곡(재즈 카페, 스윙, 비밥, 보사노바, 재즈 펑크, 집시 재즈), 세계의 리듬 8곡(한국의 뽕짝, 브라질의 삼바, 자메이카의 레게, 푸에르토리코의 레게톤, 쿠바의 살사, 아르헨티나의 탱고, 일본의 시티팝, 인도의 방그라), 클래식 4곡(현악 3중주로 옮긴 파헬벨의 캐논, 모차르트 「아이네 클라이네 나흐트무지크」의 첫머리, 첼로·하프·플루트로 연주하는 베토벤 「환희의 송가」, 오르간으로 연주하는 바흐 「토카타와 푸가 D단조」의 첫머리)이 들어 있습니다. 하나를 고르면 템포와 비트, 세 트랙의 악기와 음표가 한꺼번에 바뀝니다.
• 세 트랙. 베이스, 화음, 멜로디가 저마다 악기와 볼륨, 음소거를 가지고, 피아노 롤에는 세 트랙의 음표가 색깔별로 겹쳐 보입니다. 카드를 고르면 건반과 소리 패널이 그 트랙을 따라갑니다.
• 악기. 신스 음색 12개와 실제로 녹음한 악기 11개(피아노, 어쿠스틱 기타, 일렉트릭 기타, 일렉트릭 베이스, 파이프 오르간, 현악기, 플루트, 색소폰, 트럼펫, 하프, 실로폰)가 있습니다.
• 비트. 킥, 스네어, 클랩, 하이햇, 오픈 하이햇, 카우벨 여섯 소리를 16칸에 찍습니다. 칸마다 켜짐, 강세, 꺼짐을 고르고, 스윙으로 엇박을 뒤로 밀 수 있습니다.
• 녹음과 아르페지오. REC를 누르고 연주하면 고른 트랙에 겹쳐 녹음되고, 16분음표 격자에 맞출지 고를 수 있습니다. 아르페지에이터는 누르고 있는 화음을 위로, 아래로, 무작위로 펼쳐 연주합니다.
• 목소리. 녹음 파일을 올리거나 마이크로 한 루프를 녹음하면 루프에 맞춰 함께 재생되고, TO NOTES를 누르면 그 멜로디가 고른 트랙의 음표가 됩니다.
• 파일. NEW를 누르면 음표와 비트, 목소리가 모두 비워져 내 곡을 처음부터 만들 수 있습니다. 곡 파일(.json)로 저장했다가 다시 열 수 있습니다. EXPORT는 곡을 두 번 반복한 WAV와 MIDI 파일을 zip 하나에 담아 주고, MIDI는 거라지밴드 같은 음악 앱에서 열어 이어서 작업할 수 있습니다.

소리는 어떻게 만드나요

신스 음색은 녹음을 재생하지 않고 그때그때 계산해서 만듭니다. 음 하나가 울릴 때마다 오실레이터 두 개와 한 옥타브 아래의 서브 오실레이터, 화이트 노이즈가 섞여 필터 두 개를 차례로 지납니다. 필터를 두 번 거치므로, 로우패스라면 컷오프보다 높은 소리가 옥타브마다 24dB씩 깎입니다. 엔벨로프 두 개가 필터와 볼륨이 시간에 따라 열리고 닫히는 모양을 정하고, LFO 하나가 음정과 필터, 볼륨을 흔들어 비브라토와 와우, 트레몰로를 만듭니다. 그 뒤로 드라이브, 코러스, 좌우로 오가는 딜레이, 리버브가 이어집니다. 리버브의 잔향도 녹음 없이 노이즈를 점점 줄여 가며 만듭니다.

드럼도 모두 합성합니다. 킥은 165Hz에서 42Hz로 떨어지는 사인파이고, 하이햇은 서로 정수배가 아닌 높이의 사각파 여섯 개를 섞은 뒤 높은 대역만 남긴 금속성 소리입니다. 녹음 악기는 몇 반음 간격으로 녹음해 둔 음 가운데 가장 가까운 것을 골라, 재생 속도를 바꿔 음높이를 맞춥니다.

박자를 맞추는 데는 시계 두 개를 씁니다. 화면을 그리는 타이머는 다른 일에 밀려 몇십 밀리초씩 늦기도 하므로, 25밀리초마다 깨어나는 타이머가 앞으로 0.12초 안에 울릴 음을 미리 찾아 오디오 시계에 정확한 시각을 예약합니다. 이 타이머는 웹 워커에서 돌기 때문에 탭이 뒤로 가도 박자가 무너지지 않습니다.

콧노래를 음표로

목소리 트랙의 TO NOTES는 YIN이라는 음높이 추정 방법을 씁니다. 소리의 짧은 조각을 자기 자신과 조금씩 어긋나게 겹쳐 보면, 한 주기만큼 어긋났을 때 두 파형이 가장 비슷해집니다. 그 어긋난 거리가 곧 주기이고, 주기에서 음높이가 나옵니다. GROOVIX는 녹음을 11,025Hz로 낮춘 뒤 약 46밀리초 길이의 창을 8밀리초마다 옮겨 가며 음높이를 재고, 다섯 칸의 중앙값으로 튀는 값을 걸러 낸 다음 가장 가까운 반음에 맞춥니다. 같은 음이 70밀리초 넘게 이어지면 음표 하나가 됩니다.

콧노래나 휘파람, 단음 악기처럼 한 번에 한 음씩 나는 소리는 잘 잡지만, 화음이나 주변 소음이 많은 녹음은 어렵습니다. 루프를 들으면서 박자에 맞춰 부르면 음표가 마디에 잘 맞습니다.

어떻게 만들었나요

라이브러리나 빌드 과정 없이 HTML, CSS, 자바스크립트로 쓴 HTML 파일 한 장이고, 소리는 모두 브라우저의 웹 오디오로 만듭니다. 화면은 한국어, 영어, 일본어를 지원합니다. 녹음 악기 소리는 VSCO 2 Community Edition, Karoryfer Samples, University of Iowa Electronic Music Studios, Freesound 기여자들이 녹음한 것으로 CC BY 3.0 라이선스를 따르며, tonejs-instruments가 정리한 파일을 4초 이내로 잘라 모노 MP3로 줄였습니다. 소스는 GitHub에 공개되어 있습니다.

시작하기

맨 위의 예시 믹스에서 곡을 고르고 PLAY를 누르세요. 빈 곡에서 시작하려면 NEW를 누르면 됩니다. 트랙 카드의 악기 목록을 바꿔 보고, 아래 건반이나 컴퓨터 키보드(A W S E D F T G Y H U J K)로 같이 연주해 보세요. 스페이스바로 재생과 정지를, R로 녹음을, Esc로 모든 소리를 끕니다. 손잡이가 모여 있는 소리 세부 조절 패널은 맨 아래에 접혀 있습니다. 마이크를 처음 쓰면 브라우저가 허락을 묻고, 만든 곡은 브라우저에 저장되며 SAVE로 파일에 남길 수도 있습니다.