Metronome for Musicians

Beats Per Minute

120

2/4 3/4 4/4 6/8

 

Why this code works for Musicians

1. The "Lookahead" Scheduler: Instead of playing the sound exactly when the interval fires, the script looks ahead 100ms into the future and schedules the sound using the audioCtx.currentTime. This bypasses any lag caused by heavy browser tabs or CPU spikes.

2. Frequency Accents: Musicians need to know where the "1" is. This code sets the oscillator to 1000Hz for the first beat and 800Hz for the others.

3. Visual Feedback: The setTimeout used for the visual dots is calculated based on the difference between the scheduled audio time and the current time, keeping the flash perfectly in sync with the "click."

4. Responsive Design: The UI uses min-height: 100vh and a flexible card layout, ensuring it looks like a dedicated app on an iPhone or a tablet propped up on a music stand.