A simple yet feature-rich web metronome app. Runs in your browser and is completely free to use.
- Tempo Settings: 1-300 BPM range
- Time Signature: Choose from 1-8 beats per bar
- Sound Types: 4 different sounds (Click, Beep, Wood, Cowbell)
- Rhythm Patterns: Simple, Eighth Notes, Triplets, Sixteenth Notes, Sextuplets
- Subdivision Sounds: Optional different sound for subdivisions
- Volume Control: 0-100% adjustable
- Pendulum Animation: Classic metronome movement
- Pulse Animation: BPM display scales with the beat
- Flash Animation: Entire screen flashes with the beat
- Beat Indicator: Shows current beat position (e.g., 3/4)
- Tap Tempo: Tap the button repeatedly to set tempo intuitively
- Preset Tempos: One-click access to common tempos
- Largo (60 BPM)
- Andante (80 BPM)
- Moderato (120 BPM)
- Allegro (140 BPM)
- Presto (180 BPM)
- Custom Presets: Save, load, and delete your own tempo configurations
- Timer Function: Set minutes and seconds, with alarm sound on completion
- Keyboard Shortcuts: Control with your keyboard
- Dark/Light Mode: Toggle between dark and light themes
- Multilingual: Japanese and English support
- Settings Persistence: Your settings are automatically saved
This app uses ES6 modules, so you need an HTTP server to run it locally.
# If you have Python 3 installed
cd metronome
python -m http.server 8000
# Open http://localhost:8000 in your browser# Use npx (included with Node.js 5.2.0+)
cd metronome
npx http-server -p 8000
# Open http://localhost:8000 in your browserUse extensions like Live Server: right-click → "Open with Live Server"
- Click the Start button to begin
- Adjust BPM using the slider or number input
- Select time signature (default is 4/4)
- Choose your preferred sound and rhythm pattern
- Adjust volume as needed
Space- Play/Stop↑/↓- Tempo ±1 (Hold Shift for ±10)T- Tap Tempo
Tap the "Tap Tempo" button repeatedly at your desired tempo, and the BPM will automatically adjust to match your taps.
- Configure your desired tempo, time signature, and rhythm pattern
- Click the + Save button in the Presets panel
- Enter a name for your preset
- Click on a saved preset to load it
- Click the × button to delete a preset
- Enable the timer checkbox
- Set minutes and seconds
- Start the metronome
- The timer counts down and plays an alarm when it reaches zero
- The metronome automatically stops
- Web Audio API: High-precision timing control
- Pure JavaScript: No frameworks required
- Responsive Design: Works on smartphones and tablets
- Offline Support: No internet connection needed after loading
- localStorage: Settings and presets are saved locally
- Chrome / Edge (Recommended)
- Firefox
- Safari
- Opera
Requires a modern browser with Web Audio API support
MIT License - Free to use, modify, and distribute
Bug reports and feature requests are welcome on GitHub Issues.
Created with Claude Code by Anthropic
Enjoy your music!
シンプルで高機能なWebメトロノームアプリです。ブラウザで動作し、完全無料で使用できます。
- テンポ設定: 1〜300 BPMまで対応
- 拍子設定: 1〜8拍まで選択可能
- 音色: 4種類の音色（クリック、ビープ、ウッド、カウベル）
- リズムパターン: シンプル、8分音符、3連符、16分音符、6連符
- 細分化拍の音: 細分化された拍に別の音を使用可能
- 音量調整: 0〜100%まで調整可能
- 振り子アニメーション: クラシックなメトロノームの動き
- パルスアニメーション: BPM表示が拍に合わせて拡大縮小
- 点滅アニメーション: 画面全体が拍に合わせて点滅
- 拍インジケーター: 現在の拍位置を表示（例: 3/4）
- タップテンポ: ボタンを連打してテンポを直感的に設定
- プリセットテンポ: よく使われるテンポをワンクリックで設定
- Largo（60 BPM）- ゆっくり
- Andante（80 BPM）- 歩く速さ
- Moderato（120 BPM）- 中くらい
- Allegro（140 BPM）- 速め
- Presto（180 BPM）- とても速い
- カスタムプリセット: 自分の設定を保存・読み込み・削除
- タイマー機能: 分・秒単位で設定可能、終了時にアラーム音
- キーボードショートカット: キーボードで素早く操作
- ダーク/ライトモード: テーマの切り替え
- 多言語対応: 日本語・英語対応
- 設定の保存: 設定が自動的に保存されます
このアプリはES6モジュールを使用しているため、ローカルで実行する際はHTTPサーバーが必要です。
# Python 3がインストールされている場合
cd metronome
python -m http.server 8000
# ブラウザで http://localhost:8000 を開く# npx (Node.js 5.2.0以降に含まれる) を使用
cd metronome
npx http-server -p 8000
# ブラウザで http://localhost:8000 を開くLive Serverなどの拡張機能を使用して、右クリック→「Open with Live Server」
- スタートボタンをクリックして再生
- テンポスライダーまたは数値入力でBPMを調整
- 拍子を選択（デフォルトは4拍子）
- 音色やリズムパターンを好みに合わせて変更
- 音量を調整
Space- 再生/停止↑/↓- テンポを±1調整（Shiftキー併用で±10）T- タップテンポ
「タップテンポ」ボタンを希望するテンポで連打すると、自動的にそのテンポが設定されます。
- 希望のテンポ、拍子、リズムパターンを設定
- プリセットパネルの + 保存 ボタンをクリック
- プリセット名を入力
- 保存したプリセットをクリックして読み込み
- ×ボタンでプリセットを削除
- タイマーのチェックボックスを有効化
- 分と秒を設定
- メトロノームを開始
- タイマーがカウントダウンし、ゼロになるとアラーム音が鳴ります
- メトロノームが自動的に停止します
- Web Audio API: 高精度なタイミング制御
- Pure JavaScript: フレームワーク不要
- レスポンシブデザイン: スマートフォンやタブレットにも対応
- オフライン対応: 読み込み後はインターネット接続不要
- localStorage: 設定とプリセットをローカルに保存
- Chrome / Edge（推奨）
- Firefox
- Safari
- Opera
※ Web Audio APIをサポートする最新のブラウザで動作します
MIT License - 自由に使用・改変・配布できます
バグ報告や機能提案は、GitHubのIssuesでお願いします。
Created with Claude Code by Anthropic
楽しい音楽ライフを！