Wavesurfer 如何加快播放音乐的过程

Question

我正在使用 WaveSurferJs 播放流式音频并将 wavesurfer init 后端设置为 MediaElement。还要画峰

var wavesurfer = WaveSurfer.create({
        .....
        container: '#waveform',
        barWidth: 2,
        barHeight: 1,
        backend: 'MediaElement',
        normalize: true
    });

wavesurfer.load(mp3_url, peakData);
wavesurfer.play();

我以播放列表的形式做了一些事情，音频元素中的第一个音频使用 preload=true 但下一个音频加载速度太慢，预加载需要时间是合乎逻辑的。但是如何加快播放音乐的过程呢？有人试过吗？

Answer 1

这已经很晚了，所以可能对作者没有用，但可能对正在寻找此信息的其他人有用。

您需要使用setPlaybackRate方法Wavesurfer Methods

例如，我在 YII2 中有一个滑块具有此代码

<?php
echo Slider::widget([
'name'=>'audio_speed',
'value'=>1,
'sliderColor'=>Slider::TYPE_GREY,
'handleColor'=>Slider::TYPE_DANGER,
'pluginOptions'=>[
'min'=>1,
    'max'=>2,
    'step'=>.1
],
'pluginEvents' => [
"slideStop" => 'function(level) { awp_player.setPlaybackRate(level.value); 
}',
]
]);
?>

因此它以正常速度 1 开始，并允许用户通过移动滑块以 0.1 为增量将速度加倍，当用户停止时 "sliding"，将调用该方法。

Answer 2

我遇到了同样的问题。它通过处理和存储音频的峰值数据并在加载元素时使用它来解决。您需要将后端设置为 'MediaElement' 以确保它开始播放 straight-away.

var wavesurfer = WaveSurfer.create({container:'#wave',
            backend: 'MediaElement'
        });

然后您需要从存储它的位置加载 pcm，然后将其作为参数传递给 load() 函数。

var pcm =[0.1491,-0.0825,0.0791,..........., -0.0022];
wavesurfer.load(mp3_url, pcm);

这将立即开始播放音频并立即绘制波形。

您需要事先计算出音频的 PCM 并将其存储。您可以使用以下函数获取他的 PCM 数据：

exportPCM(length, accuracy, noWindow, start)
 – Exports PCM data into a JSON array.
   Optional parameters length [number] - default: 1024,
   accuracy [number] - default: 10000,
   noWindow [true|false] - default: false,
   start [number] - default: 0

一个迟到的答案，但我刚刚在这一刻自己解决了这个问题！

Wavesurfer 如何加快播放音乐的过程

Wavesurfer How to speed up the process of playing music

javascript

html5-audio

wavesurfer.js