如何解决希望将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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。