初始化以容器为目标的 WaveSurfer div

Question

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

$(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 显示元素的正确 ID，因此选择器似乎可以工作，但是 wavesurfer.js 给出以下错误：

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

Answer 1

由wavesurfer.js的github，init函数中的container参数说明如下：

CSS-selector or HTML-element where the waveform should be drawn. This is the only required parameter.

它没有提到 jQuery 对象是否被接受，因此请尝试将 $(this) 替换为 this:

window['waveForm' + selectedId].init({
  container: this, // or container: '#audio'
  waveColor: 'violet',
  progressColor: 'purple'
});

Answer 2

抱歉，我之前在休息，无法进入 deep.But 尽量不要打开最好在我们解决问题时更新问题（当然除非出现完全不同的问题）

以下是您尝试使用更简单的方法执行的功能的完整注释实现。

这是一个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>

初始化以容器为目标的 WaveSurfer div

Initialize WaveSurfer targeting the container div

html

javascript

jquery

wavesurfer.js

这是一个copy hosted on my server to avoid the cross domain issues

jQuery

Html