I have a web app that generates and plays back rhythmic musical notation and I would like to build "playalong mode".
e.g. the user clicks/taps to play along during playback and their accuracy is assessed along the way.
In order to achieve this I am measuring the currentTime of the Web Audio API AudioContext at each user interaction, resolving this to a position within the measure of music.
No matter how I build it I can't seem to achieve 100% accuracy. The problem seems to be the latency caused by JS event handlers such as 'onClick', 'onPointerDown' etc. The interaction is always read slightly late and inconsistently late each time so that I can't reliably account for this latency.
Does anyone have any idea how I could solve this problem?
A few approaches I've tried so far
- Measuring the AudioContext time directly from user interaction onClick, onPointerDown
- Reducing the AudioContext time received by a constant latency value
- Reducing the AudioContext time received by measuring event execution time with an approach similar to: How to measure latency between interaction and mousedown event in JavaScript?
My approach seems fundamentally flawed as there is always unpredictable and hard to measure latency. I am hoping to find a way to measure the AudioContext time with 100% accuracy on a users interaction
