본문 바로가기

악기 연주 — 피아노·기타·드럼·오타마톤을 클릭·터치·키보드로 연주하는 브라우저 악기

피아노, 기타, 드럼, 오타마톤 네 가지 악기를 마우스·터치로 누르거나 컴퓨터 자판을 눌러 바로 연주할 수 있는 브라우저 악기 놀이터입니다. 모든 소리는 Web Audio API로 그 자리에서 합성하며, 샘플 음원 파일이나 외부 서버 없이 브라우저 안에서만 계산합니다.

70%
리버브
100
녹음 없음

건반을 누르거나 컴퓨터 자판을 치세요. 누른 채 옆으로 끌면 이어서 울립니다(글리산도). 건반 아래쪽을 누를수록 세게, 위쪽을 누를수록 여리게 소리 납니다.

보이는 음역 C3 – C6
음색
건반 표시
건반 크기
따라 치기

피아노

건반 88개(A0~C8)가 모두 있습니다. 위쪽 막대를 끌거나 옥타브 버튼으로 보이는 창을 옮기세요. 음색은 오실레이터 모양만 바꾸는 것이 아니라 배음과 해머 소리까지 따로 만든 다섯 가지 패치입니다 — 그랜드 피아노는 비조화 배음과 해머 타격음, 일렉 피아노는 FM 종소리, 오르간과 신스 패드는 누르고 있는 동안 유지됩니다. 샘플 음원 파일은 쓰지 않습니다.

지판 모드는 프렛을 눌러 멜로디를 짚고, 누른 채 위아래로 끌면 줄이 차례로 울립니다(스트럼). 코드 모드는 코드 이름을 누르면 코드 전체가, 줄 한 칸을 누르면 그 줄만 울립니다.

연주 방식
튜닝

기타

줄 소리는 Karplus-Strong 현 합성으로 매번 새로 만듭니다 — 짧은 잡음을 딜레이 라인에 넣고 반복해 감쇠시키는 방식입니다. 뜯는 세기에 따라 피킹 밝기가 달라지고, 나무 통을 지난 소리처럼 낮은 공명을 입혀 내보냅니다. 코드 모드의 운지는 스탠다드 튜닝 기준이며, 키를 고르면 그 키에서 자주 쓰는 코드 여덟 개가 깔립니다.

패드를 두드리세요. 가운데를 칠수록 세게, 가장자리로 갈수록 약하게 나고, 테를 치면 림 소리가 납니다. 반주를 켜 두면 그 위에 맞춰 칠 수 있습니다.

반주

드럼

모든 타격음은 노이즈와 오실레이터를 필터·포락선으로 짧게 감싸 그 자리에서 합성합니다(샘플 음원 없음). 심벌과 하이햇은 서로 어긋난 사각파 여섯 개를 겹쳐 밴드패스로 훑은 금속성 울림이고, 킥은 음높이가 떨어지는 사인파에 비터 소리를 얹은 것입니다. 패드마다 좌우 자리가 달라 하이햇은 왼쪽, 플로어 탐은 오른쪽에서 들립니다.

목(긴 막대)을 누르거나 끌면 음높이가 미끄러지듯 이어집니다. 얼굴이나 “볼 누르기” 를 누르고 있으면 입이 벌어져 “와~” 하는 소리가 됩니다 — 실물에서 몸통을 쥐는 동작입니다.

이 브라우저는 3D 를 그리지 못해 리본만 보여 드립니다. 소리와 조작은 같습니다.

C4 · 도

얼굴을 직접 눌러도 됩니다.
음정 비브라토
몸 색

오타마톤

일본 메이와 덴키(明和電機)가 만든 장난감 겸 악기 오타마톤을 흉내 낸 음정 슬라이더입니다. 소리는 밴드패스 두 개를 겹쳐 사람 목소리의 포먼트를 흉내 내고, 볼을 누르면 그 두 봉우리가 함께 위로 열려 “와~” 가 됩니다. 실제 악기와 같이 한 번에 한 음만 냅니다 — 여러 곳을 짚으면 가장 최근에 짚은 음이 이깁니다.

자주 묻는 질문

소리는 어떻게 만들어지나요? mp3 같은 샘플 파일을 쓰나요?
샘플 음원 파일은 전혀 쓰지 않습니다. 브라우저 내장 Web Audio API 로 매 순간 소리를 직접 합성합니다. 피아노는 배음과 해머 타격음을 쌓고, 기타는 Karplus-Strong(짧은 잡음을 딜레이 라인에 넣고 반복 감쇠시키는 현 합성 기법)으로 뜯는 소리를 만들고, 드럼은 잡음과 오실레이터를 포락선으로 짧게 감싸 타격음을 흉내 내고, 오타마톤은 밴드패스 두 개로 목소리의 포먼트를 흉내 냅니다.
눌렀는데 소리가 안 나요
브라우저의 자동재생 정책 때문입니다. 방문자가 화면을 한 번 누르기 전까지는 소리 재생이 막혀 있습니다. 건반·프렛·패드·목 막대 아무 곳이나 한 번 눌러 보세요. 아이폰이라면 측면 무음 스위치도 확인해 주세요.
세게 치는 것과 약하게 치는 것이 구분되나요?
누른 자리가 세기입니다. 건반은 아래쪽을 누를수록 세고, 드럼은 가운데를 때릴수록 셉니다. 기타는 줄 가운데를 뜯으면 세고 끝쪽은 약합니다. 컴퓨터 자판에는 세기가 없으므로 Shift 를 같이 누르면 액센트가 됩니다. MIDI 건반을 연결하면 건반이 보낸 실제 세기를 그대로 씁니다.
연주를 녹음할 수 있나요?
랙의 ● 버튼으로 녹음하고 ▶ 버튼으로 재생합니다. 녹음을 켜면 그때부터 누른 음을 시각과 함께 적어 두고, 재생하면 그대로 되돌려 들려줍니다. 반복(루프)을 켜면 계속 돌아가므로 기타로 코드를 녹음해 두고 그 위에 피아노로 멜로디를 얹을 수 있습니다. 녹음은 브라우저 안에만 있고 어디로도 보내지 않습니다 — 그래서 파일로 내려받을 수는 없습니다.
곡을 따라 칠 수 있나요?
피아노의 “따라 치기” 에서 곡을 고르면 다음에 칠 건반이 켜집니다. 맞게 누를 때마다 한 칸 나아가고, 타이밍을 재지 않으므로 천천히 짚어 봐도 됩니다. “들어보기” 를 누르면 먼저 들려줍니다. 실린 곡은 저작권이 풀린 전통곡과 연습 음계입니다.
MIDI 건반을 연결할 수 있나요?
크롬·엣지·파이어폭스에서는 됩니다. 랙에 “MIDI 건반” 버튼이 보이면 눌러서 권한을 허락하면 연결된 건반으로 바로 연주할 수 있습니다 — 세기와 서스테인 페달도 그대로 전해집니다. 사파리는 Web MIDI 를 지원하지 않아 버튼이 보이지 않습니다.
여러 건반을 동시에 누를 수 있나요?
피아노·기타·드럼은 동시에 여러 음을 냅니다. 여러 손가락(멀티터치)과 여러 자판을 함께 눌러도 각각 독립적으로 소리 납니다. 다만 오타마톤은 실제 악기처럼 한 번에 한 음만 냅니다 — 여러 곳을 짚으면 가장 최근에 짚은 음이 우선합니다.
오타마톤이 뭔가요?
일본 메이와 덴키가 만든 장난감 겸 악기입니다. 음표(♪) 모양 몸통에 달린 막대를 손가락으로 짚어 음높이를 정하고, 몸통의 볼을 쥐어 입을 벌렸다 오므리며 소리를 냅니다. 여기서는 목 막대를 끌면 실제처럼 음이 뚝뚝 끊기지 않고 부드럽게 이어지고, “볼 누르기” 로 입을 벌릴 수 있습니다.

함께 쓰면 좋은 도구