I'm use WaveSurferJs to playing streaming audio and set on wavesurfer init backend as MediaElement. Also do a drawing of peaks

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

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

And I do something in the form of a playlist first audio in audio element uses preload=true but next audio loading so slow, It is logical that it takes time for preloading. But how to speed up the process of playing music? Is there anyone who tried to do this?

I'm use WaveSurferJs to playing streaming audio and set on wavesurfer init backend as MediaElement. Also do a drawing of peaks

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

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

And I do something in the form of a playlist first audio in audio element uses preload=true but next audio loading so slow, It is logical that it takes time for preloading. But how to speed up the process of playing music? Is there anyone who tried to do this?

• javascript
• html5-audio
• wavesurfer.js

Share Improve this question Follow edited Jul 19, 2017 at 5:52 Rai asked Jul 18, 2017 at 11:47 RaiRai 19355 silver badges1515 bronze badges 4

• What do you mean by "playback progress"? Do you mean the playback rate? – evolutionxbox Commented Jul 18, 2017 at 11:51
• sorry, i'm incorrectly expressed. I need to speed up the process of playing music – Rai Commented Jul 19, 2017 at 5:51
• Depending on what you want to do you could try the partialRender parameter to render only that part of the waveform that is currently visible. – mspae Commented Aug 13, 2017 at 15:56
• @mspae Thanks for the answer. But this option does not suit me – Rai Commented Aug 15, 2017 at 7:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I had the same problem. It was solved by processing and storing the Peak data for the audio and using it when loading the element. You need to set the backend to 'MediaElement' to make sure it starts playing straight-away.

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

You then need to load the pcm from where you have stored it, and then pass it as a parameter to the load() function.

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

This will start playing the audio immediately and it will draw the waveform immediately too.

You will need to have previously calculated the PCM for the audio and to have stored it. You can get his PCM data using the following function:

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

A late answer, but I've just solved this problem myself this minute!

This is very late, so probably not of use to the author but could be of use for someone else who is looking for this info.

You need to use the setPlaybackRate method Wavesurfer Methods

So for example I have a slider in YII2 that has this code

<?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); 
}',
]
]);
?>

So it starts at normal speed, 1 and allows the user to double the speed, in 0.1 increments by moving the slider and when the user stop "sliding", the method is called.