Send Midi Clock Using WAAClock

[dannybullo]

Hi.

Long ago I read the article "A tale of Two Clocks" by Chris Wilson.
https://web.dev/audio-scheduling/
https://github.com/cwilso

For simplicity, I found the WAAClock that seems to implement Chris'es idea:

https://github.com/sebpiq/WAAClock
So I'm trying to send MIDI Clock

const context = new AudioContext();
const clock = new WAAClock(context);
clock.start()
clock.callbackAtTime(function () {
    WebMidi.outputs.forEach(outputPort => outputPort.sendClock({channels: 1}));
}, 0).repeat(0.02);`

Repeat EVERY 0.02 seconds is equivalent to 125 BPM, as Clock is 24 pulses per quarter note. (you can do the Math ;) )
As you can see in the attached GIF, the BPM slightly drifts:

QUESTION:
What do you think is the beST way to implement MIDI CLOCK, in order to have the most accurate timing?

1. Implement Chris Wilson Idea from scratch, using AudioContext() ?
2. Use the timer provided in WebMidiJs Lib? If so, should I write something like Chris'es idea but using DOMHighResTimeStamp in the WebMidiJs?
3. Do we have any examples of metronomes or periodic scheduling of MIDI (not audio)?

Thanks a lot!
Danny Bullo

[djipco]

Timing in Web MIDI is definitely a pain point. This was discussed on the Web MIDI API GitHub repo.

While I have not used it, WAAClock claims it uses Chris Wilson's approach. It might not be dead-accurate but it should not drift over longer periods of time.

Use the timer provided in WebMidiJs Lib? If so, should I write something like Chris'es idea but using DOMHighResTimeStamp in the WebMidiJs?

WEBMIDI.js only provides the current time through WebMidi.time (which is simply an alias to performance.now()). It does not provide a timer.

Playing notes precisely is possible by scheduling them. For instance, this bit of code playNote("C4", {time: "+1000"} will play the note precisely 1000 milliseconds in the future.

If you need to schedule other stuff, Chris Wilson's approach seems to be the way to go (until the Web MIDI API is available in workers).

[dannybullo]

Thanks a lot djipco!

Update: for the example, I was trying to sync Guitar Rig 5 (in Stand-Alone Mode) to tempo via MIDI Clock. I tried sending MIDI clock from REAPER and ABLETON LIVE to Guitar Rig 5 to see if the sync was better/solid. To my surprise, the BPM meter behaved exactly the same: constant tempo fluctuation.
Notice that the drift is not really too much though.... So I guess that is what is possible via MIDI. Or maybe the Guitar Rig BPM matter is too "sensitive" (not rounding BPM display at all).

FWIW, I conclude that WAAClock works as expected. The BPM drift is the same as using Live/Repaer which, I assume, are capable of sending SOLID MIDI clock messages.

For my test, I didn't use a Web Worker. Something like this is enough to send MIDI Clock. Modify it/create a class as needed;

const PULSES_PER_QUARTER_NOTE = 24;
const BPM_ONE_SECOND = 60;

let context = new AudioContext();
let clock = new WAAClock(context);

const calculateClockDelay = bpm => BPM_ONE_SECOND  / bpm /  PULSES_PER_QUARTER_NOTE; 

const startMidiClock = bpm => {
    clock.start();

    clock.callbackAtTime(function () {
        WebMidi.outputs.forEach(outputPort => outputPort.sendClock({}));
    }, 0).repeat(calculateClockDelay(bpm));`
}

const stopMidiClock = () =>  clock.stop();

Regard,
Danny Bullo

[djipco]

Awesome! Thanks for reporting your findings. I'm sure it'll help others. Cheers!