This is a demo of the use-worker-timer package .
It provides a convenient React hook for scheduling events in a web worker. Web workers have the advantage of running on a separate thread, independent of intensive computations on the main thread, and are not throttled by the browser.
This is particularly valuable for music applications, where precise timing is essential.

To use the hook, you define a list of checkpoints and a callback that is called whenever a checkpoint is reached. It returns a set of functions to control the playback of these checkpoints, including playing, pausing, navigating to a specific point in the playback, and looping. Additionally, it provides the current state of the playback and an estimated progress based on the elapsed time since the last reported checkpoint.

For this demo, the worker will play a snare sound every second while logging the time lag between schedule and execution.
It is important to note that attaining perfect accuracy in JavaScript remains challenging due to inherent language limitations. While threading-related inaccuracies have been mitigated, overall timing precision is still influenced by platform and browser performance characteristics. Therefore, the timer may still exhibit slight inaccuracies, typically within a few milliseconds.
Worker is not ready
Reported progress: 0:00:000Estimated progress: 0:00:000