React primitives for building metronomes on the web.

React component exposing the metronome's state via a render prop to compute the UI. It uses a Web Worker to not block the main JavaScript execution thread, assuring to stay in sync for a long time.

No more "Not quite my tempo" 🥁.

Based on Chris Wilson's work: "Scheduling Web Audio with Precision".

# not published yet

This package depends on react. Make sure to install it as well.

const MusicApp = () => (
  <Metronome
    tempo={69}
    render={({
      tempo,
      beatsPerMeasure,
      playing,
      beat,
      subdivision,
      onPlay,
      onBpmChange,
    }) => (
      <div>
        <header>
          {tempo} <small>BPM</small>
          {beatsPerMeasure}/{beatsPerMeasure} <small>T.S.</small>
        </header>

        <main>
          <input
            type="range"
            min={40}
            max={240}
            value={tempo}
            onChange={event => onBpmChange(event.target.value)}
          />
          {beat}/{beatsPerMeasure}
          <button onClick={onPlay}>{playing ? 'Pause' : 'Play'}</button>
        </main>
      </div>
    )}
  />
)

The component uses a render prop and ignores children.

number | defaults to 120

The tempo or BPM (beats per minute) of the metronome.

number | defaults to 4

The number of ticks per measure. A value of 5 means a time signature of 5/4.

number | defaults to 1

The number of ticks per beat. Possible values are:

Value	Description
1	Half notes
2	Eighth notes
3	Triplet notes
4	Sixteenth notes

boolean | defaults to false

true if the metronome should start on mount, false otherwise.

number | defaults to 880

The frequency in hertz of the main beat.

number | defaults to 1

The volume (or gain) of the main beat. Between 0 and 1.

number | defaults to 440

The frequency in hertz of the subdivision beats.

number | defaults to 0.5

The volume (or gain) of the subdivision beats. Between 0 and 1.

function | no default

The function to describe the UI of the metronome based on its state. The state object composed of:

function | no default

Called when a beat increments.

function | no default

Called when a subdivision tick increments.

function | no default

Called when the metronome starts.

function | no default

Called when the metronome stops.

• From the root folder:
  • Watch changes: yarn start
• From the demo/ folder:
  • Run app: yarn start

Every time you make changes to the library, the browser injects the new code into the app.

MIT © François Chalifour