希望将Tabulator和Wavesurfer.js波形图片合并为单独的行

问题描述

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

我已经能够轻松地独立成功地独立处理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);

将相同的代码块放置在循环的之外（如上面的代码块所示）会将单个波形绘制到顶部div中，而不是将其他波形2绘制到顶部div中被创建，甚至没有重复。

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

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

解决方法

这里有一些问题。

首先是Tabulator使用虚拟DOM，因此不可能从表外部成功地操纵行内容，必须从内部格式化程序完成。

wavesurfer插件失败的原因是因为尚未将其添加到DOM中，因此您传递给waveurfer堵塞的查询选择器无法绘制波形。仅在 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标签必须是唯一的，但是您要创建的每一行都包含一个ID“ waveform2”，因此将仅显示第一个。如果允许的话，最好将元素直接传递到容器属性中：

那是什么：

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

html javascript tabulator wavesurfer.js