Así que estoy creando un sitio web de pianos donde el usuario puede dibujar notas y tocarlas. Un cabezal de reproducción atraviesa la pantalla y las notas que se encuentran debajo se reproducen.

Tengo un estado llamado played para cada nota que rastrea si la nota se está reproduciendo o no.

 const note = useRef(new Audio(props.filePath)); note.current.preload = "auto"; useEffect(() => { if (played) { note.current.play(); } else { note.current.pause(); } }, [played]);

Tengo un useRef para acceder al sonido para evitar que se vuelva a cargar cuando se procesa el componente.

También tengo un estado llamado progress que se actualiza constantemente a medida que se mueve el cursor de reproducción. Pero no creo que esto deba ser un problema ya que el sonido está precargado.

Mi problema es que aunque se ejecuta el comando .play() , el sonido aún tarda unos segundos en escucharse.

Por ejemplo, justo después de la llamada .play() , registré el valor note.paused , que resultó ser falso. Esto significa que la nota se está reproduciendo, pero no puedo escucharla.

Por alguna razón, si una nota se está reproduciendo en ese momento y el cursor de reproducción retrocede y reproduce la misma nota nuevamente, el sonido se escucha instantáneamente. Pero si detengo el cabezal de reproducción y espero a que finalice el audio, y luego vuelvo a reproducirlo, el retraso vuelve.

Entonces, ¿cómo hago para que la nota se escuche tan pronto como el cabezal de reproducción alcance la nota cada vez?