初始化以容器div为目标的WaveSurfer [英] Initialize WaveSurfer targeting the container div

问题描述

我正在尝试使用JavaScript为wave动态创建的元素使用wavesurur.js创建波形。这是我的代码：

  $（document）.ready（function（）{
 var id = 9; 
 $ b $（＃audio）。append（'< div class =rowid =wave'+ id +'>< / div>'）; 
 $（'＃audio'）。on（'DOMNodeInserted'，'div'，function（）{
 var selectedId = $（this）.prop（'id'）; 
 
 console.log（selectedId）; 
 window ['waveForm'+ selectedId] = Object.create（WaveSurfer）; 
 window ['waveForm'+ selectedId] .init（{
容器：$（this），
 waveColor：'violet'，
 progressColor：'purple'
}）; 
 
 window ['waveForm'+ selectedId]。 on（'ready'，function（）{
 window ['waveForm'+ selectedId] .play（）; 
}）; 
 
 window ['waveForm'+ selectedId] .load（selectedId +'.mp3'）; 
}）; 
}）; 
  

console.log显示元素的正确标识，所以选择器似乎可以工作，但波浪冲击。 js给出以下错误：

  Uncaught TypeError：this.container.appendChild不是函数
  

解决方案

对不起，我之前在休息时间工作，无法深入。但是，尽量不要打开重复的问题，最好更新问题，因为我们解决这个问题（除非当然会出现完全不同的问题）

下面是一个功能完整的评论实现，你试图用一个简单的做法。

以下是我的服务器上托管的副本，以避免跨域问题

jQuery

  //创建一个全球阵列来容纳我们的WaveSurfers 
 var WaveSurfers = []; 
 $ b $（文档）.ready（函数（）{
 //添加元素
 //不要给它们中的任何一个id 
 $（＃audio ）.append（'< div class =row needsWave>< / div>'）; 
 
 //调用我们将在第二个
 //中定义的函数在你的文件的路径
 addWaveSurfer（'http://dodsoftware.com/sotests/wavesurfer/minecraftrap.mp3'）; 
}）; 
 
 function addWaveSurfer（path）{
 //创建WaveSurfer的实例
 var tempWavesurferObject = Object.create（WaveSurfer）; 
 //初始化对象
 //.needsWave：last获取类needsWave的最后一个元素
 //这将是我们刚刚添加的元素
 tempWavesurferObject .init（{
 container：$（.needsWave：last）[0]，//[0]从jQuery对象获取DOM元素
 waveColor：'violet'，
 progressColor：'purple'
}）; 
 tempWavesurferObject.on（'ready'，function（）{
 tempWavesurferObject.play（）; 
}）; 
 tempWavesurferObject.load（path）; //加载我们传入的文件
 //将WaveSurfer添加到全局数组中，以便我们跟上它
 WaveSurfers.push（tempWavesurferObject）; 
 
 //下面显示了如何在几秒钟后通过停止播放来访问WaveSurfers 
 setTimeout（function（）{
 var last = WaveSurfers.length-1; / /获得最后一个WaveSurfer元素的索引
 WaveSurfers [last] .stop（）; 
}，10000）; 
 
 $ b  

Html

 < script src =https://cdn.rawgit.com/katspaugh/wavesurfer.js/master/dist/wavesurfer.min.js>< /脚本> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> 
< div id =audio>< / div> 
  

I am trying to create waveform using wavesurfer.js for dynamically created elements using JavaScript. Here is my code:

$(document).ready(function() {
  var id = 9;

  $("#audio").append('<div class="row" id="wave' + id + '"></div>');

  $('#audio').on('DOMNodeInserted', 'div', function() {
    var selectedId = $(this).prop('id');

    console.log(selectedId);
    window['waveForm' + selectedId] = Object.create(WaveSurfer);
    window['waveForm' + selectedId].init({
      container: $(this),
      waveColor: 'violet',
      progressColor: 'purple'
    });

    window['waveForm' + selectedId].on('ready', function() {
      window['waveForm' + selectedId].play();
    });

    window['waveForm' + selectedId].load(selectedId + '.mp3');
  });
});

console.log displays the correct id of the element, so the selector seems to work, however wavesurfer.js gives the following error:

Uncaught TypeError: this.container.appendChild is not a function

解决方案

Sorry, I was at work on break before and couldn't get into it that deep.But try not to open duplicate questions it is better to update the question as we work through the issue (unless of course a totally different problem emerges)

The below is a functional fully commented implementation of what you are trying to do with a bit simpler of an approach.

Here's a copy hosted on my server to avoid the cross domain issues

jQuery

// create a global array to hold our WaveSurfers
var WaveSurfers=[];

$(document).ready(function(){
  // add your element
  // dont give any of them ids
  $("#audio").append('<div class="row needsWave"></div>');

  // call the function we will define in a second
  // pass in the path to your file
   addWaveSurfer('http://dodsoftware.com/sotests/wavesurfer/minecraftrap.mp3');
});

function addWaveSurfer(path){
    // create instance of WaveSurfer
    var tempWavesurferObject = Object.create(WaveSurfer);
        // initialize the object 
        // ".needsWave:last" gets the last element with the class "needsWave"
        // which will be the element we just added
    tempWavesurferObject.init({
            container: $( ".needsWave:last" )[0],// "[0]" gets the DOM element from the jQuery object
            waveColor: 'violet',
            progressColor: 'purple'
          });
        tempWavesurferObject.on('ready', function () {
            tempWavesurferObject.play();
        });
        tempWavesurferObject.load(path); // load the file we passed in
    // add the WaveSurfer to the global array so we can keep up with it
    WaveSurfers.push(tempWavesurferObject);

    // below shows how to access the WaveSurfers later by stoping the playback after a few seconds
     setTimeout(function(){
          var last = WaveSurfers.length-1; // get index of last WaveSurfer element
          WaveSurfers[last].stop();
     }, 10000);

}

Html

<script src="https://cdn.rawgit.com/katspaugh/wavesurfer.js/master/dist/wavesurfer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="audio"></div>

这篇关于初始化以容器div为目标的WaveSurfer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！