Question

我正在尝试使用waveurfer.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

抱歉，我之前在休息时工作，无法深入了解。但是尽量不要打开duplicate questions最好在我们处理问题时更新问题（当然除非出现完全不同的问题）

以下是一个功能完全注释的实现，您尝试使用更简单的方法。

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

Answer 2

从wavesurfer.js的{{3}} container init函数中的$(this)参数描述如下：

应该绘制波形的CSS选择器或HTML元素。这个是唯一必需的参数。

没有提及是否接受了jQuery对象，因此请尝试将this替换为window['waveForm' + selectedId].init({ container: this, // or container: '#audio' waveColor: 'violet', progressColor: 'purple' });：

unique_ptr

初始化针对容器div的WaveSurfer

2 个答案:

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

的jQuery

HTML