スマートフォンやPCのブラウザで使えるメトロノーム。アプリのインストールは不要で、URLを開くだけで楽器の練習に使える。木目調の振り子がテンポに合わせて揺れる見た目にこだわり、ホーム画面に追加すればオフラインでも起動できる。
主な機能
- テンポ設定: BPMは30〜300。±ボタン、スライダー、直接入力のほか、振り子の重りをドラッグしても変えられる。タップテンポにも対応。
- 拍子とアクセント: 2/4・3/4・4/4・5/4・6/8・7/8に対応し、1拍目を強調できる。
- 音色: Click / Wood / Beep / Block の4種類。実際の録音素材を使っている。
- 小節頭のベル: 1・2・4小節ごとに「チーン」と鳴らし、練習の区切りが分かるようにできる。
- 設定バンク: 1〜5のボタンでテンポ・拍子・音色の組み合わせを切り替えられる。曲ごと・練習メニューごとに使い分けられ、変更は自動で保存される。
- スピードトレーナー: 一定の小節ごとにテンポを自動で上げていく。
- カウントインとシャッフル: 1〜2小節の予備拍と、スウィングのリズムに対応。
- 練習を助ける機能: 画面フラッシュと拍数表示による視覚メトロノーム、対応端末での振動、画面スリープ防止、ダークモード。
使い方
- ページを開き、BPMを設定して再生ボタンを押す。
- 「拍子・音色」のパネルで拍子や音色、ベルの間隔を選ぶ。
- よく使う設定は1〜5のバンクに残しておき、次からはボタン1つで呼び出す。
技術構成
ビルド不要の素のHTML・CSS・JavaScriptで作り、GitHub Pagesで配信している。音はWeb Audio APIで鳴らし、Service WorkerとWeb App Manifestでオフライン起動とホーム画面への追加に対応した。効果音は BigSoundBank.com がCC0で公開している素材から単発の打撃音を切り出し、音色ごとの音量差が出ないようにピーク音量を揃えている。
工夫した点
メトロノームはリズムが少しでもずれると練習の役に立たない。ブラウザの setTimeout は、タブがバックグラウンドに回ると呼び出しが遅れることがある。そこで、AudioContextの時刻を基準に少し先の音まで予約しておく「先読みスケジューリング」で音を鳴らし、タイミングがぶれないようにした。振り子のアニメーションも毎フレームAudioContextの時刻を読んで描くので、見た目と音がずれない。
振り子は、実物のメトロノームと同じく、振り子が中央を通過する瞬間に音が鳴るように合わせた。端で止まる瞬間に鳴らすと、見た目のリズムと音が食い違って気持ち悪く感じる。この調整は実際に動かして目と耳で確かめながら詰めた。
開発の大部分はClaude Codeで進めた。先読みスケジューリングのような定番の手法はAIのほうから提案してくれて助かった一方で、cowbell.wav という名前のファイルの中身が実はドラムスティックの音だった、というミスはコードを読んでも見つからず、実際に音を聴いて初めて気づいた。コードは正しく動くのに、中身が名前と合っていない。AIと一緒に作るときは、こうした間違いを人が耳で確かめることが欠かせないと実感した。
