1

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

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

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

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

4

2 回答 2

5

我有同样的问题。它通过处理和存储音频的峰值数据并在加载元素时使用它来解决。您需要将后端设置为“MediaElement”以确保它立即开始播放。

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

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

于 2018-04-04T14:27:35.317 回答
0

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

您需要使用 setPlaybackRate 方法Wavesurfer 方法

因此，例如，我在 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 的增量将速度加倍，当用户停止“滑动”时，调用该方法。

于 2017-12-07T18:44:56.780 回答