[英]Restrict the height of the wave wavesurfer.js
In documentation there is written that Height of the waveform bars.在文档中写有波形条的高度。 Higher number than 1 will increase the waveform bar heights .Is there any possibility to restrict the wavebar till one or lower?大于 1 的数字会增加波形条的高度。是否有可能将波形条限制为 1 或更低?
Any help would be aprreciated since I can't find a solution by myself任何帮助都会受到重视,因为我自己找不到解决方案
After Deep understanding, I have created my own custom function to optimize the height of the waves深入了解后,我创建了自己的自定义 function 来优化波浪的高度
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]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.