Estoy tratando de cambiar el color de una imagen SVG usando el audio del micrófono.

Tengo la lógica escrita, el color se actualiza en el elemento SVG, pero nada cambia visualmente.

 window.onload = function () { if (navigator.getUserMedia) { navigator.getUserMedia( { audio: true }, (stream) => { var context = new AudioContext(); var src = context.createMediaStreamSource(stream); var analyser = context.createAnalyser(); var svg = document.querySelector("#rangoli"); src.connect(analyser); analyser.connect(context.destination); analyser.fftSize = 256; var bufferLength = analyser.frequencyBinCount; var dataArray = new Uint8Array(bufferLength); function renderFrame() { requestAnimationFrame(renderFrame); analyser.getByteFrequencyData(dataArray); for (var i = 0; i < bufferLength; i++) { barHeight = dataArray[i] / 2; var r = barHeight + 25 * (i / bufferLength); var g = 250 * (i / bufferLength); var b = 50; svg.setAttribute("fill", `rgb(${r}, ${g}, ${b})`); } } renderFrame(); }, () => console.log("Error") ); } };

Aquí está el SVG actualizando el valor de relleno:

Aquí hay una demostración de CodePen: https://codepen.io/GR8z/pen/qBjopZG