Estoy tratando de actualizar una variable de estado con el valor del atributo currentTime de un elemento. Agrego un detector de eventos al evento 'timeupdate' para poder llamar a setPosition con el valor de currentTime (la posición se usa para colocar la perilla en un control deslizante que representa la reproducción de la canción).

Sin embargo, recuperar audioElement.currentTime y usar el resultado como argumento para setPosition hace que mi navegador (tanto Chrome como Safari) se bloquee. De hecho, el Monitor de actividad en mi MacBook muestra que la cantidad de subprocesos que utiliza el sitio web local aumenta continuamente a medida que se reproduce el archivo de audio, pero no estoy seguro de lo que eso significa. El sitio también usa una cantidad significativa de memoria, pero SÓLO al recuperar el atributo de hora actual para cada evento de 'actualización de hora'.

No tengo idea de qué está causando problemas de rendimiento en mi componente, al menos supongo que es un problema de rendimiento.

El archivo de audio reproducido es .wav

 function SongPlayer({ file }) { const [audioElement] = useState(new Audio(file)); const [playing, setPlay] = useState(null); const [audioContext] = useState(new AudioContext({ sampleRate: 44100 })); const [gainNode] = useState(audioContext.createGain()); const [position, setPosition] = useState(0); useEffect( () => { const track = audioContext.createMediaElementSource(audioElement); track.connect(gainNode).connect(audioContext.destination); audioElement.addEventListener('timeupdate', () => { setPosition(audioElement.currentTime); }); }, [], ); useEffect( () => { if (playing) audioElement.play(); else if (!playing) audioElement.pause(); }, [playing], ); return ( <> </> ); } export default SongPlayer;

localhost usando +500 subprocesos y más de 1 Gb de memoria

EDITAR:

el problema fue cuando estaba llamando al new AudioContext() como un valor de estado inicial. El constructor estaba siendo llamado con cada renderizado .

Esta publicación me ayudó a resolverlo y lo explica bien: https://stackoverflow.com/a/64131447/13757284