Why do the silent areas overlap with the waveform with sound?

[TD-jizhijun]

Hello, team! I followed the official example to mark the silent area, but the effect was not ideal. Example address: https://wavesurfer.xyz/examples/?silence.js
The silent area I marked will overlap with the waveform with sound. Here is what I rendered:

My scenario is that the recording file has 2 channels, and then the common silent area is marked. My core implementation code is as follows:

// Find regions separated by silence in both channels
      const extractRegions = (
        channelData1: Float32Array,
        channelData2: Float32Array | null,
        duration: number
      ) => {
        const minValue = 0.01;
        const minSilenceDuration = 0.1;
        const mergeDuration = 0.2;
        const scale = duration / channelData1.length;
        let silentRegions: SilentRegions[] = [];

        // Find all silent regions longer than minSilenceDuration in both channels
        let start = 0;
        let end = 0;
        let isSilent = false;

        channelData1.forEach((value: number, i: number) => {
          const channelValue2 = channelData2 ? channelData2[i] : null;

          if (
            value < minValue &&
            (channelValue2 === null || channelValue2 < minValue)
          ) {
            if (!isSilent) {
              start = i;
              isSilent = true;
            }
          } else if (isSilent) {
            end = i;
            isSilent = false;
            if (scale * (end - start) > minSilenceDuration) {
              silentRegions = [
                ...silentRegions,
                {
                  start: scale * start,
                  end: scale * end,
                },
              ];
            }
          }
        });

        // Merge silent regions that are close together
        let mergedRegions: SilentRegions[] = [];
        let lastRegion: SilentRegions | null = null;

        silentRegions.forEach((region) => {
          if (lastRegion && region.start - lastRegion.end < mergeDuration) {
            lastRegion.end = region.end; // Update the end of the last merged region
          } else {
            lastRegion = region; // Set the current region as the new last region
            mergedRegions = [...mergedRegions, lastRegion]; // Add the new region to mergedRegions
          }
        });

        return mergedRegions; // Now return the silent regions directly
      };

      // Create regions for each silent part of the audio
      wave.on('decode', (duration) => {
        const decodedData = wave.getDecodedData();
        let channelData1 = null;
        let channelData2 = null;

        if (decodedData) {
          if (decodedData.numberOfChannels >= 2) {
            // Ensure there are at least two channels
            channelData1 = decodedData.getChannelData(0);
            channelData2 = decodedData.getChannelData(1);
          } else {
            channelData1 = decodedData.getChannelData(0);
          }

          const silentRegions = extractRegions(
            channelData1,
            channelData2,
            duration
          );

          // Add silent regions to the waveform
          silentRegions.forEach((region) => {
            wsRegions.addRegion({
              start: region.start,
              end: region.end,
              drag: false,
              resize: false,
              color: '#DFE3E5',
            });
          });
        }
      });

[katspaugh]

You can tweak the parameters on top to better match your audio.

    const minValue = 0.01;
    const minSilenceDuration = 0.1;
    const mergeDuration = 0.2;