No estoy contento con la forma en que este código dibuja este visualizador de música usando canvas y getByteFrequencyData . https://share.getcloudapp.com/Kou7AJb1
Parece que las barras son demasiado grandes y creo que se debe a que la matriz FFT (Fast Fourier Transform) contiene un amplio espectro de datos, pero en mi código estoy generando una cantidad n de barras según el ancho del lienzo.
Luego, después de tener n barras, estoy asignando la FFT al mismo índice de la barra, omitiendo mucha información útil.
function convertRange(value: any, r1: any, r2: any) { return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0]; } // line up and down const drawVisualizer2 = ({ canvas, frameData, background }: any) => { const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); // TODO: Improve? const bars = Math.round(canvas.width) / 15 - 1; const max_of_array = Math.max.apply(Math, frameData.fft); for (let i = 0; i < bars; i++) { const height = convertRange(frameData.fft[i], [0, max_of_array], [0, canvas.height / 2 - 20]); const centerY = canvas.height / 2; // draw the bar ctx.strokeStyle = background ? background.colors[0] : "#ffffff"; ctx.lineWidth = 10; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo((i + 1) * 15, centerY); ctx.lineTo((i + 1) * 15, centerY + height); ctx.stroke(); ctx.beginPath(); ctx.moveTo((i + 1) * 15, centerY); ctx.lineTo((i + 1) * 15, centerY - height); ctx.stroke(); } }; export default drawVisualizer2;Lo que creo que se debe hacer es promediar la FFT en función de la cantidad de barras en el ciclo. Si eso tiene sentido, ¿cuál es un código de enfoque práctico para lograrlo?
Espero que esto tenga sentido, feliz de aclarar si es necesario.
Supongo que frameData.fft es el Uint8Array que contiene los datos de frecuencia reales devueltos por el método AnalyserNode.getByteFrequencyData() .
Su suposición es correcta: la cantidad de barras, por supuesto, no coincide con la cantidad de elementos almacenados en la matriz y con un bucle como
for (let i = 0; i < bars; i++) { ... frameData.fft[i] ... }solo está utilizando los primeros valores desde cero hasta la cantidad de barras y, en última instancia, saltando el resto completo de la matriz.
Sin embargo, la solución es bastante simple:
En lugar de obtener valores de la matriz en intervalos de 1, el intervalo debe ser el número de elementos de la matriz dividido por el número de barras. Luego, este número se multiplica por la variable i dentro del ciclo for y se redondea, ya que la división puede dar como resultado un número decimal y los elementos de la matriz están en posiciones enteras.
Aquí hay un ejemplo:
let frameData = { fft: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] }; let bars = 5; let steps = frameData.fft.length / bars; for (let i = 0; i < bars; i++) { console.log(frameData.fft[Math.round(i * steps)]); }