javascript - 使用 Javascript 设置 SVG 填充

Question

我正在尝试使用麦克风中的音频更改 SVG 图像的颜色。

我已经编写了逻辑，SVG 元素上的颜色已更新，但视觉上没有任何变化。

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")
    );
  }
};

这是更新填充值的 SVG：

这是一个 CodePen 演示： https ://codepen.io/GR8z/pen/qBjopZG

标签： javascriptsvgaudio