본문 바로가기

메트로놈

BPM과 박자를 설정하면 점이 박자에 맞춰 깜빡이고 클릭음이 울립니다. 첫 박 강세, 빠르기말 표시 지원.

브라우저에서 로컬 처리 · 서버 업로드 없음
120 BPM
Moderato
박자표
박자에 맞춰 여러 번 누르세요

메트로놈 소개

메트로놈은 BPM과 박자표를 정하면 점이 박에 맞춰 켜지고 클릭음이 울립니다. 첫 박에 강세가 들어가 마디의 시작을 알 수 있고, 빠르기를 모를 때는 박자에 맞춰 버튼을 몇 번 두드려 BPM을 자동으로 잡을 수도 있습니다.

웹에서 메트로놈을 만들 때 가장 어려운 부분이 타이밍입니다. 흔히 쓰는 setInterval은 브라우저가 화면을 그리거나 다른 일을 하느라 바쁘면 수십 밀리초씩 밀리고, 백그라운드 탭에서는 아예 1초에 한 번으로 제한됩니다. 이 도구는 대신 룩어헤드 스케줄러를 씁니다. 오디오 전용 시계로 앞으로 울릴 클릭음의 시각을 미리 예약해 두고 조금씩 채워 넣는 방식이라, 화면이 버벅여도 소리는 제자리에서 울립니다. 박자가 흔들리면 연습 자체가 망가지기 때문에 이 차이가 중요합니다.

빠르기말은 BPM 구간에 따라 Largo(매우 느리게)·Adagio·Andante·Moderato·Allegro·Vivace·Presto 순으로 표시됩니다. 다만 이 구분은 시대와 판본마다 기준이 달라 참고 정도로 보시는 편이 좋습니다. 연습에 쓸 때의 요령을 덧붙이면, 틀리지 않고 칠 수 있는 가장 빠른 속도보다 한참 느리게 시작해서 두세 번 깨끗하게 통과할 때마다 5 BPM씩 올리는 방식이 효과적입니다. 소리가 안 들린다면 브라우저 정책상 시작 버튼을 한 번 눌러야 오디오가 활성화된다는 점, 그리고 기기가 무음 모드는 아닌지 확인해 보세요.

사용 방법

  1. BPM(분당 박자 수)을 슬라이더나 숫자입력으로 40~240 사이에서 정하세요.
  2. 박자표(2/4·3/4·4/4·6/8·8/8)를 선택하면 마디당 박 수만큼 점이 표시됩니다.
  3. 시작 버튼을 누르면 첫 박(강세)부터 점이 박자에 맞춰 켜지고 클릭음이 울립니다.
  4. 원하는 BPM을 모를 땐 탭으로 맞추기 버튼을 박자에 맞춰 여러 번 눌러 자동 설정하세요.
  5. 볼륨 슬라이더로 클릭음 크기를 조절할 수 있습니다.

자주 묻는 질문

박자가 정확한가요? 끊기지 않나요?
네. Web Audio API의 정밀 타이머(AudioContext.currentTime)로 클릭음을 미리 예약하는 룩어헤드 스케줄러를 사용합니다. 화면 렌더링이나 탭 전환의 영향을 거의 받지 않아 일반적인 setInterval 방식보다 훨씬 안정적인 타이밍을 냅니다.
소리가 안 나요. 왜 그런가요?
브라우저는 사용자가 버튼을 누르기 전에는 소리를 막습니다. 시작 버튼을 한 번 누르면 오디오가 활성화됩니다. 그래도 안 들리면 기기·브라우저 볼륨과 무음(매너) 모드를 확인하세요.
빠르기말(Largo·Allegro 등)은 어떤 기준인가요?
BPM 구간에 따라 전통적인 빠르기말을 표시합니다. 예: Largo(매우 느리게)·Adagio·Andante·Moderato(보통 빠르기)·Allegro·Vivace·Presto(매우 빠르게). 곡·판본마다 기준이 조금씩 다르니 참고용으로 활용하세요.
이어폰으로 들으면 박자가 어긋나는 느낌이에요.
블루투스 이어폰은 구조상 수십에서 수백 밀리초의 지연이 생깁니다. 클릭음이 그만큼 늦게 들리므로 합주나 녹음에는 부적합합니다. 연습할 때는 유선 이어폰이나 스피커를 쓰세요.