在wavesurfer.js中使用MP4 url

Question

我想在我的Reactjs应用程序中使用wavesurfer.js。我得到了我的应用程序的视频(mp4) urls。我想用wavesurfer绘制波形。这是我尝试过的，但它需要大约3分钟才能获得30分钟的视频波形。这是太多的延误。对此有什么解决方案吗？

componentDidMount() {

    var mediaElt = document.querySelector('video');

    this.$waveform = document.getElementById('wave')
    this.wavesurfer = WaveSurfer.create({
        container: this.$waveform,
        waveColor: 'violet',
        progressColor: 'purple'
    })
    this.wavesurfer.load("https://example.mp4")
}

Answer 1

这不是一个完美的解决方案，但根据wavesurfer.js docs的说法，有一个partialRender选项，它将“使用PeakCache来提高大型波形的渲染速度”。所以你要做的就是：

this.wavesurfer = WaveSurfer.create({
    container: this.$waveform,
    waveColor: 'violet',
    progressColor: 'purple',
    partialRender: true
})

我希望这能帮到你!