Wavesurfer 如何加快播放音乐的进程答案

【问题标题】：Wavesurfer How to speed up the process of playing musicWavesurfer 如何加快播放音乐的进程
【发布时间】：2023-03-03 20:04:01
【问题描述】：

我使用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 但下一个音频加载速度很慢，预加载需要时间是合乎逻辑的。但是如何加快播放音乐的进程呢？有没有人尝试过这样做？

【问题讨论】：

你说的“播放进度”是什么意思？你是指播放率吗？
抱歉，我的表述有误。我需要加快播放音乐的进程
根据您的需要，您可以尝试使用 partialRender 参数仅渲染当前可见的那部分波形。
@mspae 感谢您的回答。但是这个选项不适合我

标签： javascript html5-audio wavesurfer.js

【解决方案1】：

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

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

然后您需要从存储 pcm 的位置加载 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

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

【讨论】：

【解决方案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 的增量将速度加倍，当用户停止“滑动”时，调用该方法。

【讨论】：