我想将WaveSurfer.js与外部音频后端一起使用,以便可以通过WaveSurfer显示(预先计算的)波形,并且WaveSurfer播放器的所有操作都会影响外部后端。
我将Youtube API用作测试用例,因为我的用例是将WaveSurfer.js以及出于版权原因无法直接使用的音频一起使用。根据@seahorsepip对How can I load only waveform and wait to user click 'play' to download the audio on Wavesurfer-js?的回答,我到达了一半。相关的代码行是
wavesurfer.backend.setPeaks(waveform_data);
wavesurfer.drawBuffer();
wavesurfer.loadArrayBuffer(waveform_data);
将绘制波形,然后单击它会跳到歌曲中的适当位置。缺少的是移动的播放头。
我的半工作示例可以在Codepen上找到:https://codepen.io/jpauwels/pen/jXwKbO?editors=1010#0