Javascript 希望将制表器和；Wavesurfer.js将波形图片转换为独立的行

我试图显示一个数据库的声音文件及其伴随的波形图片。这张图片是我试图完成的一个例子：

我已经能够轻松独立地成功地使用和操作tablator和wavesurfer.js，但在尝试将两者结合起来时遇到了问题

var table = new Tabulator("#example-table", {
      height: "100%",

      layout: "fitDataFill",
      resizableColumns: false,
      data: cheeseData,
      columns: [{
        title: "Sounds Database",
        field: "type",
        sorter: "string"
      }, ],
      rowFormatter: function(row) {
        var element = row.getElement(),
          data = row.getData(),
          width = element.offsetWidth,
          rowTable, cellContents;

        //clear current row data
        while (element.firstChild) element.removeChild(element.firstChild);

        //define a table layout structure and set width of row
        rowTable = document.createElement("table")
       
        //rowTable.style.width = (width) + "px";
        rowTabletr = document.createElement("tr");

        //add image on left of row
        cellContents = "<td><img src='/images/" + data.image + "'></td>";

        //add row data on right hand side
        cellContents += "<td><div><strong>Type:</strong> " + data.type + "</div><div><strong>Length:</strong> " + data.length + "</div><div><strong>Title:</strong> " +
        data.title + "</div></td>";

        cellContents += "<td><div id='waveform2'></div></td>"



        rowTabletr.innerHTML = cellContents;



        rowTable.appendChild(rowTabletr);


        //append newly formatted contents to the row
        element.append(rowTable);





      },

      rowClick: function(e, row) {

        data = row.getData();

        wavesurfer.load('../audio/' + data.filename);
        wavesurfer.on('ready', function() {
          wavesurfer.play();
        });
        //e - the click event object
        //row - row component

      },


    });
    var wavesurfer2 = WaveSurfer.create({
      container: '#waveform2',
      scrollParent: true
    });
    wavesurfer2.load('../audio/' + data.filename);

将同一个代码块放在环路外（如上面的代码块所示）确实会将单个波形拉入顶部div，但不会将创建的其他波形M2，甚至不会重复

我认为我的思路是正确的，或者至少在概念上是正确的。如何在每一行中创建一个html div，将wavesurver.js波形放入其中

---

我只是一个编码训练营的学生，在寻找正确的方向。你能提供的任何帮助我克服这一障碍的见解都会很好。非常感谢。

这里有一些问题

首先，制表器使用虚拟DOM，因此不可能从表外部成功操作行内容，必须从格式化程序内部操作行内容

wavesurfer插件失败的原因是尚未添加到DOM中，因此传递给wavesurfer插件的查询选择器无法绘制波浪。只有在rowFormatter函数返回后，才会将元素添加到DOM中

您需要将wave surfer函数放置在rowFormatter中，然后放置在

setTimeout

中，以便rowFormatter在调用插件之前有机会生成行：

//在调用wavesurfer插件之前，请给出要渲染的行时间
设置超时（（）=>{
WaveSurfer 2=WaveSurfer.create({
容器：“#波形m2”，
父母：对
});
wavesurfer2.load（'../audio/'+data.filename）；
}, 50); 

下一个问题是，您正试图通过id引用容器。元素上的

id

标记必须是唯一的，但您正在创建的每一行都包含一个id“waveform2”，因此将只显示第一行。如果允许，最好将元素直接传递到容器属性：

那么什么是：

cellContents+=“”
rowTabletr.innerHTML=cellContents；

应成为：

rowTabletr.innerHTML=cellContents；
var td=document.createElement（“td”）；
var waveformDiv=document.createElement（“div”）；
td.appendChild（波形MDIV）；
rowTabletr.appendChild（td）；
//在调用wavesurfer插件之前，为行提供渲染时间
设置超时（（）=>{
WaveSurfer 2=WaveSurfer.create({
容器：waveformDiv//
cellContents += "<td><div id='waveform2'></div></td>"

var wavesurfer2 = WaveSurfer.create({
      container: '#waveform2',
      scrollParent: true
    });
    wavesurfer2.load('../audio/' + data.filename);