I have a project on React.js https://spyhere.github.io/build_beta_0.7/.
This is purely my idea. I found a problem that I don’t know how to play a sound without waiting to React to resolve the promise. As a result, I have an issue where some sound shots are delayed and even omitted.
I’m talking about “reading” button on high speed (“Expert”), though it’s not actually high speed, it’s just 90 beats per minute.
Another problem is a bug when you click to read or practice for the first time after loading the page and React is starting to load audio, so it is a huge delay. Is there a way to preload audio, so it will be ready to play instantly?
I tried to google this thing and apparently found nothing useful. I’m using the recommended method with “audio tag” and ref.
First of all, what does this page do? Are you to play along on an instrument?
Without code there’s not a lot I can say. Maybe naive but let’s rule out the obvious first: are you creating a lot of variables and deleting them ? If not, they remain alive in memory? That might slow everything down.
It looks very cool by the way.
This app is intended to provide people the explanation what is note values and how they work + providing the possibility to practice. Right now you can use any key on the keyboard to “play” note values. Just remember that the first metronome bar is always empty.
It’s not about memory issues. I’ve made some tests and made the most efficient way to have the highest performance on this page during “reading” and “practice”. You can make the performance test and see it on your own.
The problem is about promises. When React needs to play a sound it’s not playing it directly, it creates a promise to play and executes it as quickle as possible. And it’s not quick enough, cause minumum 50 ms delay is a huge value in terms of playing note durations with metronome.
Sorry for not answering. The truth is, I need to redo all the exercises on React to be able to give a decent answer. I was getting good at it last year, abandoned it for other things and now it’s become all very vague. And promises aren’t that easy either. You’re in a list, I will redo the react exercises at some point and when I figure it out, I’ll get back to you. Sorry I can’t be of more help.
Hi @Spyhere,
Without looking at the code, I cannot tell you where the error is but the delay is natural and to make the requests synchronous instead of asynchronous try playing around with this concept named ReactDOM.unstable_batchedUpdates for useEffect hook.
I don’t know your code but if you are using hooks then you can definitely play with this concept. Look in the React docs or try providing some more info.