wavesurfer getPeaks is returning an empty array

user_13117895 0
Viewed 812

i`m using wavesurfer.js a customizable audio waveform visualization (https://wavesurfer-js.org/), from the following library

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

even including the minified script: <script src="https://unpkg.com/wavesurfer.js"></script> the problem remains

below is my code where i was returning the audio peaks in an interval, 3 days ago it was working normally, until yesterday it was working normally,

today it just stopped returning some value and is returning an empty array

if i remove the backend option from the setup it does not render my audio on the screen

  var wavesurfer = WaveSurfer.create({
      container: document.querySelector('#waveform'),
      // backend: 'MediaElement',
      waveColor: 'black',
      progressColor: 'gray',
    });

I will explain my application better, I am sending a file through a form so I pass the file (path)

$audio = asset('original/'. $file->getClientOriginalName ());

to the return view

return view ('result')-> with('audio', $audio);

and i'm rendering it this way

  $(document).ready(function() {

    var wavesurfer = WaveSurfer.create({
      container: document.querySelector('#waveform'),
      backend: 'MediaElement',
      waveColor: 'black',
      progressColor: 'gray',
    });

    var audioElement = document.createElement('audio')

    audioElement.autoplay = true
    audioElement.loop = true
    audioElement.crossOrigin = 'anonymous'
    audioElement.src = '{!! $audio !!}'

    wavesurfer.load(audioElement);

    wavesurfer.on('ready', function() {

      var length  = wavesurfer.getDuration();
      var start   = 0;
      var end     = length;

      console.log(wavesurfer.backend.getPeaks(length, start, end));

    });

  });

and in this way, using the backend when creating the WaveSurfer the waves are rendered on screen, if I remove them, the peaks appear but the waves on the screen do not

could someone tell me what am i doing wrong? I spent 6 hours today trying to solve it and i couldn't

how should i install or import the library to use it? thank you, i'll wait

waveform jquery javascript
1 Answers

It works if you remove this line from the config:

backend: 'MediaElement',

Working example:

$(document).ready(function() {
  var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#waveform'),
    // backend: 'MediaElement',
    waveColor: 'black',
    progressColor: 'gray'
  });
  
  wavesurfer.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

  wavesurfer.on('ready', function() {
    var length = 300;
    var start = 0;
    var end = 300;
    console.log(wavesurfer.backend.getPeaks(length, start, end));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js"></script>

<div id="waveform"></div>

Update

From the API documentation:

Can the audio start playing before the waveform is drawn?

Yes, if you use the backend: 'MediaElement' option.

In the options it says the default backend is WebAudio, where MediaElement is a fallback for unsupported browsers. I think it's not necessary to set it.

user_13719950
Related