react-metronome

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".

Installation

# not published yet

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

Usage

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.

Props

tempo

number | defaults to 120

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

beatsPerMeasure

number | defaults to 4

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

subdivision

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

autoplay

boolean | defaults to false

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

beatFrequency

number | defaults to 880

The frequency in hertz of the main beat.

beatVolume

number | defaults to 1

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

subdivisionFrequency

number | defaults to 440

The frequency in hertz of the subdivision beats.

subdivisionVolume

number | defaults to 0.5

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

render

function | no default

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

Property	Type	Description
tempo	number	The tempo (beats per minute) of the metronome
beatsPerMeasure	number	The number of beats per measure
playing	boolean	true if the metronome has started, false otherwise
beat	number	The current beat count
subdivision	number	The subdivision of a beat
onBpmChange	function(tempo: number)	The function to call to change the tempo
onPlay	function()	The function to call to toggle the playing value

onTick

function | no default

Called when a beat increments.

onSubtick

function | no default

Called when a subdivision tick increments.

onStart

function | no default

Called when the metronome starts.

onStop

function | no default

Called when the metronome stops.

Development

• 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.

License

MIT © François Chalifour