wavesurfer getPeaks 返回一个空数组

Question

我正在使用 wavesurfer.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>问题仍然存在

下面是我的代码，我在其中 return 间歇地播放音频峰值，3 天前它工作正常，直到昨天它工作正常，

今天它刚刚停止 returning 一些值并且returning 一个空数组

如果我从设置中删除后端选项，它不会在屏幕上呈现我的音频

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

我会更好地解释我的应用程序，我通过表单发送文件所以我传递文件（路径）

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

进入return视图

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 documentation：

Can the audio start playing before the waveform is drawn?

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

在 options 中它说默认的 backend 是 WebAudio，其中 MediaElement 是不支持的浏览器的后备。我觉得没必要设置。

wavesurfer getPeaks 返回一个空数组

wavesurfer getPeaks is returning an empty array

javascript

jquery

waveform