react decibel meter and use

Question

i need to make a decibel meter i try to use 2 libary but they wont work and they very old

i found a function that make this but it wont work as expected

first of all the issue is inside this function i get the " let decibelNumString = decibelNum.toString().substring(0, 2); " which is get me the number of the decibel and make it to integear but i want to make the minNumber and MaxNumber as state because it should re render after the changes happen

the probme it make a lot of re render becuase every 100ms it change the numbers i have also the current decibel so it need to be render every 100ms and it not good for perfomance


  // const [minNumber, setMinNumber] = useState(25);
  // const [maxNumber, setMaxNumber] = useState(30);
  

  let arr = [];
  let volumeCallback = null;
  let volumeInterval = null;

  (async () => {
    // Initialize
    try {
      const audioStream = await navigator.mediaDevices.getUserMedia({
        audio: {
          echoCancellation: true,
        },
      });
      const audioContext = new AudioContext();
      const audioSource = audioContext.createMediaStreamSource(audioStream);
      const analyser = audioContext.createAnalyser();
      analyser.fftSize = 512;
      analyser.minDecibels = -127;
      analyser.maxDecibels = 0;
      analyser.smoothingTimeConstant = 0.4;
      audioSource.connect(analyser);
      const volumes = new Uint8Array(analyser.frequencyBinCount);
      volumeCallback = () => {
        analyser.getByteFrequencyData(volumes);
        let volumeSum = 0;
        for (const volume of volumes) volumeSum += volume;
        const averageVolume = volumeSum / volumes.length;
        // Value range: 127 = analyser.maxDecibels - analyser.minDecibels;

        let decibelNum = (averageVolume * 100) / 127;
        let decibelNumString = decibelNum.toString().substring(0, 2);
        if (Number(decibelNumString) > maxNumber) {
          // (maxNumber = Number(decibelNum))
          // setMaxNumber((prev) => {
          //   return (prev = Number(decibelNumString));
          // });
        }
        if (Number(decibelNumString) < minNumber) {
          // setMinNumber((prev) => {
          //   return (prev = Number(decibelNumString));
          // });
        }
        console.log(decibelNumString);
        // console.log(minNumber + "min");
        // console.log(maxNumber + "max");
        arr.push(Number(decibelNumString));
        // console.log(arr)
      };
    } catch (e) {
      console.error("Failed to initialize volume visualizer, simulating instead...", e);
      // Simulation
      //TODO remove in production!
      let lastVolume = 50;
      volumeCallback = () => {
        const volume = Math.min(Math.max(Math.random() * 100, 0.8 * lastVolume), 1.2 * lastVolume);
        lastVolume = volume;
      };
    }
    // Use

    // start();
  })();

  const stop = () => {
    clearInterval(volumeInterval);

    // volumeInterval = null;
  };
  const start = () => {
    // Updating every 100ms (should be same as CSS transition speed)
    if (volumeCallback !== null && volumeInterval === null) volumeInterval = setInterval(volumeCallback, 100);
  };

react decibel meter and use

0 Answers0