How to make instant audio in React.js?

Greetings!

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.

I can provide code if it’s needed. Thanks.

Hi,

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.

Greets,
Karin

Hi, Karin.

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.