waveurfer getPeaks возвращает пустой массив

Question

я использую waveurfer. js настраиваемую визуализацию формы звукового сигнала (https://wavesurfer-js.org/) из следующей библиотеки

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

, даже включая минимизированный сценарий: <script src="https://unpkg.com/wavesurfer.js"></script> проблема остается

ниже приведен мой код, в котором я возвращал пиковые значения аудио с интервалом, 3 дня go он работал нормально, до вчерашнего дня он работал нормально,

сегодня он просто перестал возвращать какое-то значение и возвращает пустой массив

, если я удаляю опцию backend из настройки, он не отображает мое аудио на экране

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

Я объясню свою заявку лучше, я отправляю файл через форму, поэтому я передаю файл (путь)

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

в ответное представление

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

, и я рендеринг это так

  $(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));

    });

  });

и таким образом, используя бэкэнд при создании WaveSurfer, волны отображаются на экране, если я удаляю их, появляются пики, но волны на экран не

может кто-то скажите мне, что я делаю не так? Сегодня я потратил 6 часов, пытаясь ее решить, и не смог

как мне установить или импортировать библиотеку, чтобы использовать ее? спасибо, я подожду

Answer 1

Это работает, если вы удалите эту строку из конфигурации:

backend: 'MediaElement',

Рабочий пример:

$(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>

Обновление

Из документации API :

Может ли звук воспроизводиться до прорисовки сигнала?

Да, если вы используете параметр backend: 'MediaElement'.

В опциях it говорит, что по умолчанию backend равно WebAudio, где MediaElement является резервным вариантом для неподдерживаемых браузеров. Я думаю, что нет необходимости устанавливать его.