Circular Metronome

A circular polyrhythmic and polymetric metronome built as a single-file PWA. Explore the universe of rhythmic patterns with two independent loops, customizable step counts, subdivisions, accents, and sound kits.

Features

• Two Independent Loops: Outer loop (2-48 steps) and inner loop (2-16 steps) for complex polyrhythms
• Visual Circular Interface: Intuitive radial visualization of patterns with color-coded steps
• Euclidean Rhythm Generation: Auto-generate patterns using Euclidean distribution algorithms
• 5 Sound Kits: Built-in metronome sounds (ping, block, seiko, tongue, synth, keyboard)
• Custom Sound Recording: Record or upload your own sounds for regular and accented beats
• MIDI Support: Full MIDI clock output and CC control for all parameters
• Tap Tempo: Detect tempo from audio input or manual tapping
• Pattern Rotation: Shift patterns left/right for evolving sequences
• Panning & Volume: Independent stereo positioning and level control per loop
• MIDI Export: Export patterns as MIDI files for use in DAWs
• Fullscreen PWA: Installable as a standalone app with offline support

Tech Stack

• Vue 3.6 — Composition API with <script setup>
• Tone.js 15.1 — Audio synthesis and sample playback
• VueUse 14.3 — Reactive utilities (@vueuse/core, @vueuse/math, @vueuse/gesture)
• UnoCSS 66.7 — Atomic CSS with Pug extractor
• Vite 8 — Build tool with single-file output
• use-chromatone 3.0.2 — Shared Chromatone composables (tempo, sequence, MIDI, colors)
• floating-vue 5.2 — Tooltip system
• webmidi 3.1 — MIDI I/O support
• Pug 3.0 — Template language
• PostCSS — Scoped styling

Development

# Install dependencies
pnpm install

# Run dev server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

Project Structure

App.vue                      — Root layout with splash screen
components/
  RhythmCircle.vue           — Main SVG container with loops and controls
  CircleLoop.vue             — Single loop with sectors, progress, and arc controls
  CircleCenter.vue           — Center BPM display with quadrant controls
  CircleOverlay.vue          — Static help overlay
  LoopControl.vue            — Circular arc slider component
  LoopSector.vue             — Individual step sector with mute/accent
  SvgRing.vue                — Reusable SVG arc component
  controls.js                — MIDI CC mapping and loop storage
  beat/
    BeatRecorder.vue         — Custom sound recorder/loader
    control/
      BeatControlBar.vue     — Linear slider control
      BeatControlButton.vue  — Generic button wrapper
      BeatControlMath.vue    — Tempo info display
      BeatControlPan.vue     — Panning control
      BeatControlTap.vue     — Tap tempo button
      BeatControlTransport.vue — Play/pause/stop controls
public/
  manifest.json              — PWA manifest
  sw.js                      — Service worker
  audio/metronome/           — Sound kit samples

Controls

Loop Controls

• Top sliders: Number of steps (left) and subdivisions (right)
• Step sectors: Click to toggle mute, click circle to toggle accent
• Bottom sliders: Sound kit selection, panning, volume
• Mute button: Toggle entire loop

Center Controls

• Drag: Adjust tempo
• Quadrants: +1, -1, ×2, ÷2 tempo
• Double-click: Reset to 120 BPM

Global Controls

• Play/Pause/Stop: Transport controls
• Tap Tempo: Bottom right button
• Audio to Tempo: Bottom left - detect tempo from microphone
• Export MIDI: Download patterns as MIDI file
• MIDI Clock: Toggle MIDI clock output
• Fullscreen: Toggle fullscreen mode

MIDI Mapping

All parameters controllable via MIDI CC on channel 1:

Loop 0 (outer):

• CC 1: Steps (over)
• CC 2: Subdivision (under)
• CC 3: Active steps count
• CC 4: Pattern rotation
• CC 5: Sound kit
• CC 6: Panning
• CC 7: Volume

Loop 1 (inner):

• CC 9: Steps (over)
• CC 10: Subdivision (under)
• CC 11: Active steps count
• CC 12: Pattern rotation
• CC 13: Sound kit
• CC 14: Panning
• CC 15: Volume

Global:

• CC 8: Master tempo

License

MIT © 2026 Davay42