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

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

70%

피아노

건반을 마우스로 클릭하거나 손가락으로 누르세요. 누른 채 옆으로 끌면 이어서 연주됩니다(글리산도). 건반 위 작은 글자가 대응하는 컴퓨터 자판입니다.

음색
옵션
옥타브기본

자판: 아랫줄 흰건반 Z X C V B N M , · 검은건반 S D G H J. 윗줄 흰건반 Q W E R T Y U I · 검은건반 2 3 5 6 7.

기타

줄을 클릭하거나 손가락으로 뜯으세요. 누른 채 위아래로 쓸면 여러 줄이 순서대로 울립니다(스트럼). 소리는 Karplus-Strong 현 합성으로 매번 새로 만듭니다.

E2 · 6번 1
A2 · 5번 2
D3 · 4번 3
G3 · 3번 4
B3 · 2번 5
E4 · 1번 6
코드로 스트럼

자판: 숫자 1~6이 6번(굵은 E)부터 1번(가는 E) 줄에 대응합니다.

드럼

패드를 두드리세요. 모든 타격음은 노이즈·오실레이터를 필터와 엔벨로프로 짧게 감싸 그 자리에서 합성합니다(샘플 음원 없음).

자판: 윗줄 Q W E R T(크래시·오픈햇·클로즈햇·림샷·클랩), 아랫줄 A S D F G(하이탐·미드탐·로우탐·스네어·킥).

오토마톤

일본 장난감 악기 오토마톤(오타마톤)을 흉내 낸 음정 슬라이더입니다. 목(막대)을 누르거나 끌면 음높이가 미끄러지듯 이어집니다.

옵션

C3

자판으로도 연주할 수 있습니다 — 피아노와 같은 배열(아랫줄 Z~, · 윗줄 Q~I)로 음을 짚습니다.

자주 묻는 질문

소리는 어떻게 만들어지나요? mp3 같은 샘플 파일을 쓰나요?
아니요, 샘플 음원 파일은 전혀 쓰지 않습니다. 브라우저 내장 Web Audio API로 매 순간 소리를 직접 합성합니다. 피아노·오토마톤은 오실레이터를 필터로 감싸고, 기타는 Karplus-Strong(짧은 노이즈를 딜레이 라인에 넣고 반복 감쇠시키는 현 합성 기법)으로 뜯는 소리를 만들고, 드럼은 노이즈와 오실레이터를 엔벨로프로 짧게 감싸 타격음을 흉내 냅니다.
눌렀는데 소리가 안 나요
브라우저는 방문자가 화면을 한 번 누르기 전까지 소리 재생을 막는 자동재생 정책이 있습니다. 건반·줄·패드·목 막대 아무 곳이나 한 번 눌러 보세요. 아이폰이라면 측면 무음 스위치도 확인해 주세요.
여러 건반을 동시에 누를 수 있나요?
피아노·기타·드럼은 여러 손가락(멀티터치)과 여러 자판을 동시에 눌러도 각각 독립적으로 소리 납니다. 다만 오토마톤은 실제 악기처럼 한 번에 한 음만 냅니다 — 여러 곳을 짚으면 가장 최근에 짚은 음이 우선합니다.
오토마톤이 뭔가요?
일본 메이커 사(Maywa Denki)가 만든 장난감 겸 악기로, 머리 모양 몸통에 달린 막대를 손가락으로 짚어 음높이를 정하고 몸통을 눌러 입을 벌렸다 오므리며 소리를 냅니다. 여기서는 목 막대를 드래그하면 실제처럼 음이 뚝뚝 끊기지 않고 부드럽게 이어집니다.