Question

我使用WaveSurferJs播放流媒体音频，并将waveurfer 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

我遇到了同样的问题。它通过处理和存储音频的峰值数据并在加载元素时使用它来解决。您需要将后端设置为“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

迟到的答案，但我这一刻就解决了这个问题！

Answer 2

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

您需要使用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为增量加倍速度，当用户停止“滑动”时，调用该方法。

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

2 个答案: