Así que he estado jugando con la visualización de audio en Javascript. Tengo un código que se parece a esto.

 let audioElement = document.getElementById('source'); let audioCtx = new AudioContext(); let analyser = audioCtx.createAnalyser(); analyser.fftSize = 2048; let total_rects=analyser.fftSize/32; let source = audioCtx.createMediaElementSource(audioElement); source.connect(analyser); source.connect(audioCtx.destination); var data = new Uint8Array(analyser.frequencyBinCount);

Entonces puedo correr

 analyser.getByteFrequencyData(data);

Lo cual, mientras se reproduce el audio, llenará la variable "datos" con una matriz que representa los datos de frecuencia del audio para el "fotograma" actual, por así decirlo. Lo que quiero poder hacer es crear una matriz de dichos datos para cada "fotograma". O, alternativamente, para seleccionar datos arbitrariamente en función de la marca de tiempo. (En milisegundos, digamos).

Actualmente puedo hacer algo como esto:

 let final_data=[]; let captureFunction=function() { analyser.getByteFrequencyData(data); final_data.push([...data]); } if(!audio_ended) { window.requestAnimationFrame(captureFunction); } }; window.requestAnimationFrame(captureFunction);

Esto funciona razonablemente bien, pero técnicamente no puedo garantizar la frecuencia o la confiabilidad de la activación de requestAnimationFrame. ¿Cómo podría lograr lo que estoy tratando de hacer?