限制波wavesurfer.js的高度

Question

在文档中，写的是波形条的高度。大于1会增加波形条的高度，，.Is，有可能将波形条限制在一个或更低的范围内？

任何帮助都是可以接受的，因为我一个人找不到解决办法

​

​

Answer 1

在深入了解之后，我创建了我自己的定制功能来优化海浪的高度

 export const optimizeWavebar = (wave) => {
  let refine = { ...wave };
  var length = 150;
  var start = 0;
  var end = 150;

  let surfer = refine.backend.getPeaks(length, start, end);

  let cloned = [...surfer];

  let max = cloned.sort((a, b) => b - a);

  let height = max[0] > 0.6 ? 0.8 : 3;
  let filteredForm = max[0] > 0.6 ? max[0] : 0.2;

  return {
    data: surfer.map((index) =>
      index >= filteredForm
        ? filteredForm
        : index <= -filteredForm
        ? -filteredForm
        : index
    ),
    height: height,
  };
};

 const getRefinedPeak = async (wave, url) => {
    return new Promise((res, rej) => {
      const unOptimized = _.cloneDeep(wave);

      unOptimized.load(url);
      unOptimized.on("ready", function () {
        let response = optimizeWavebar(unOptimized);
        wave.params.barHeight = response.height;
        return res(response.data);
      });
    });
  };

  useEffect(() => {
    if (currentTrack && waveformRef.current) {
      setPlay(false);
      const options = formWaveSurferOptions(
        waveformRef.current,
        "#BFC9CA",
        true,
        4.5
      );

      wavesurfer.current = WaveSurfer.create(options);

      const refinedWavebars = getRefinedPeak(
        wavesurfer.current,
        currentTrack.url
      );

      refinedWavebars.then((res) => {
        wavesurfer.current.backend.setPeaks(res);
        wavesurfer.current.drawBuffer();
        wavesurfer.current.getArrayBuffer(currentTrack.url, (data) =>
          wavesurfer.loadArrayBuffer(data)
        );
        wavesurfer.current.load(currentTrack.url);

      });
    }

    return () => {
      wavesurfer.current?.destroy();
      setEnableBtn(true);
    };
  }, [currentTrack.id]);