1

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

2 回答 2

2

抱歉，我之前正在休息，无法深入研究。但是尽量不要打开重复的问题，最好在我们解决问题时更新问题（当然，除非出现完全不同的问题）

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

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

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>
于 2015-08-30T05:05:01.237 回答
1

从 的github中wavesurfer.js，函数中的container参数init描述如下：

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

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

window['waveForm' + selectedId].init({
  container: this, // or container: '#audio'
  waveColor: 'violet',
  progressColor: 'purple'
});
于 2015-08-30T03:30:56.600 回答