时间戳

首页 > 解决方案 > 使用 wavesurfer-js 在一页中显示多个波形

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

问题描述

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

这是创建每个 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 %}

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

标签： javascripthtmldjango-templateswavesurfer.js

解决方案

推荐阅读