Tonejs / Tone.js

A Web Audio framework for making interactive music in the browser.
https://tonejs.github.io
MIT License
13.37k stars 976 forks source link

Playalong mode #1151

Closed jhoward1994 closed 4 months ago

jhoward1994 commented 1 year ago

Hi ToneJS team 👋🏻 I love the library so far. Great work!

I'm wondering if you can help me. I have a web app that generates and plays back rhythmic musical notation and I have been trying 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(s) of music.

No matter how I build it I can't seem to achieve 100% accuracy. The milisecond difference between the notes I'm trying to detect is often very small and 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.

This isn't an issue with ToneJS specifically but I'm wondering if you have any ideas about how I could solve this? (using the ToneJS Transport perhaps?)

I'd realy appreciate any help, thanks!

jhoward1994 commented 1 year ago

I've put together a CodeSandbox that will hopefully help you understand the problem: https://codesandbox.io/s/festive-sound-w7zz22?file=/src/App.js

braebo commented 1 year ago

I had no problem getting 10 "hits" in a row. Making the time window more generous to account for potential latency would be the only "solution" that I can think of unfortunately. Did you wind up getting something you're happy with?

tambien commented 4 months ago

Make sure you're passing in the time that scheduleRepeat provides into triggerAttack otherwise the time will not be accurate