时间戳

首页 > 解决方案 > 将 MP4 url​​ 与 wavesurfer.js 一起使用

javascript - 将 MP4 url​​ 与 wavesurfer.js 一起使用

问题描述

我想在我的 Reactjs 应用程序中使用 wavesurfer.js。我得到了我的应用程序的视频 (mp4) url。我想使用 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")
}

标签： javascriptreactjswavesurfer.js

解决方案

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

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

我希望这有帮助！

推荐阅读