想要在wavesurfer中给出平均高度

问题描述

import React,{ useEffect,useRef,useState } from "react";

import WaveSurfer from "wavesurfer.js";

const formWaveSurferOptions = ref => ({
  container: ref,barWidth:1,waveColor: "#eee",progressColor: "OrangeRed",cursorColor: "OrangeRed",barRadius: 10,responsive: true,height: 200,barGap:0,pixelRatio: 5,barMinHeight:100,normalize: true,partialRender: true
});

export default function Waveform({ url }) {
  const waveformRef = useRef(null);
  const wavesurfer = useRef(null);
  const [playing,setPlay] = useState(false);
  const [volume,setVolume] = useState(0.5);

 
  useEffect(() => {
    setPlay(false);

    const options = formWaveSurferOptions(waveformRef.current);
    wavesurfer.current = WaveSurfer.create(options);

    wavesurfer.current.load(url);

    wavesurfer.current.on("ready",function() {
   
      if (wavesurfer.current) {
        wavesurfer.current.setVolume(volume);
        setVolume(volume);
      }
    });

 
    return () => wavesurfer.current.destroy();
  },[url]);

  const handlePlayPause = () => {
   ...
  };

  const onVolumeChange = e => {
    ...
  };

  return (
    <div>
      <div id="waveform" ref={waveformRef} />
      <div className="controls">
        <button onClick={handlePlayPause}>{!playing ? "Play" : "Pause"}</button>
        <input
         ...
        />
        <label htmlFor="volume">Volume</label>
      </div>
    </div>
  );
}

这里的问题是，我想设置波的最小峰值的高度，并给高度一个平均值，在这个水平上它不会上升。我尝试了 minHeightBar，但不幸的是根本不起作用，为了更好地理解，我已经连接了两个图像，所以如果有人知道这一点，请帮助，谢谢:)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）