希望将制表符和 Wavesurfer.js 波形图片组合成单独的行

Question

我正在尝试显示声音文件的数据库及其伴随的波形图片。这张照片是我要完成的示例：

我已经能够轻松地独立成功地使用和操作 Tabulator 和 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);

在构建每一行时，我正在创建一个名为 'waveform2' 的新 div，我想在其旁边放置该特定音频文件的图片：

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

这似乎工作正常，但是当我尝试将 wavesurfer.js 波形（在行创建循环内）绘制到 div 中时它不起作用：

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

将相同的代码块放置在循环的[=31=]外部（如上面的代码块所示）确实将单个波形绘制到循环中顶部 div 但不是创建的其他 waveform2，甚至不是重复的。

我认为我走在正确的轨道上，或者至少在概念上是这样。我如何在每一行中创建一个 html div，我可以将 wavesurver.js 波形放入其中？

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

Answer 1

这里有一些问题。

首先是 Tabulator 使用虚拟 DOM，因此无法从 table 外部成功操作行内容，必须从格式化程序内部完成。

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

您需要将 wave surfer 函数放在 rowFormatter 中，然后放在 setTimeout 中，以便为 rowFormatter在调用插件之前构建行的机会：

//give the row time to render before calling the wavesurfer plugin
setTimeout(() => {
    wavesurfer2 = WaveSurfer.create({
       container: '#waveform2',
      scrollParent: true
    });
    wavesurfer2.load('../audio/' + data.filename);
}, 50);

下一个问题是您正试图通过 ID 引用容器。元素上的 id 标签必须是唯一的，但您创建的每一行都包含一个“waveform2”的 ID，因此只会显示第一个。如果允许的话，最好将元素直接传递到容器中属性:

那是什么：

cellContents += "<td><div id='waveform2'></div></td>"
rowTabletr.innerHTML = cellContents;

应该变成：

rowTabletr.innerHTML = cellContents; 

var td = document.createElement("td");
var waveformDiv = document.createElement("div");

td.appendChild(waveformDiv);
rowTabletr.appendChild(td);

//give the row time to render before calling the wavesurfer plugin
setTimeout(() => {
    wavesurfer2 = WaveSurfer.create({
       container: waveformDiv,  // <---- pass node for container div directly to plugin
      scrollParent: true
    });
    wavesurfer2.load('../audio/' + data.filename);
}, 50);

或者，如果您不能这样做，则为每一行 div 生成一个唯一的 ID

希望将制表符和 Wavesurfer.js 波形图片组合成单独的行

Looking to Combine Tabulator & Wavesurfer.js Waveform Pictures Into Indivudual Rows

html

javascript

css

wavesurfer.js

tabulator