使用 wavesurfer-js 在一页中显示多个波形

如何解决使用 wavesurfer-js 在一页中显示多个波形

我正在尝试在带有 for 循环的 Django 项目中每页放置多个波形。我创建了一组 wavesurfers（每个波形一个）。它们渲染得很好，但只有最后的 wavesurfers 播放。

这是创建每个 wavesurfer 的函数：

<script>

var wavesurfers_array=[];

function wavesurfer_creator(i_,url){

  w= WaveSurfer.create({
    container:'#waveform'+ i_,});

w.load(url);

wavesurfers_array.push(w);

return w;
}

var i=0; //counter of wavesurfers

这是 Django 模板语言中的 for 循环，用于构建每个波形

 {% for song in song_list %}
  
  <div>

    <a>{{ song.name }}</a>
    
    <div id="waveform"></div>

    <script type="text/javascript">
    
      $("#waveform").attr({id:"waveform"+i}); //change id of waveform div to be compitable with each wavesurfer
    
      wavesurfer_creator(i,url);
    
      wavesurfers_array[i].on('ready',function () {
          wavesurfers_array[i].play();
      });

      i+=1;

    </script>
    
  </div> 

{% endfor %}

我是编程新手。我已经尝试了几天来解决这个问题。如果你们能帮助我，我将不胜感激:)