我在处理https://github.com/naomiaro/waveform-playlist
时遇到了挑战如果你要通过演示，你会发现它是网络音频编辑器。我只需要重建它。从某种意义上说，如果您看到波形播放列表，则可以看到四种类型的音频。人声，吉他，钢琴和低音。自定义后，它们将只有一行，我们可以添加多个音频，我们应该可以像以前一样创建新音乐，音乐应该能够在同一行重叠，并且应该像以前一样工作。
我如何自定义这样的插件。如果你以前在插件中做了一些自定义，你可以告诉我怎么做，也让我知道是否有可能像我说的那样做。
答案 0 :(得分：0)
我已经创建了一个库，可以显示您正在寻找的视觉部分。 waveshaper-dom是一个全触摸支持波形编辑库（正在进行中，demo），waveshaper包含所有核心算法，如果您想实现自己的可视化/交互，则不需要浏览器依赖。您需要将音频处理拆分到另一个库（我使用了令人惊叹的Tone.js音频）
问题归结为你有多段音频分布在多个轨道上。段的最小表示形式为：
您要做的第一件事是为每个轨道展平分段数组，以便删除所有重叠，必须保留原始分段数组。您可以使用区间合并算法link的变体。
其次，您将需要一个算法，该算法采用展平的段列表，参数列表（缩放级别，虚拟滚动的滚动位置，详细级别等）以及对实际音频文件的访问。算法应返回一个带有绘图数据的数组（每个要绘制的像素的一组数据），然后将其用作渲染函数的输入。 考虑到每秒音频是+ - 44100个数据点，优化此算法非常重要。
对于交互，您可以使用像hammerjs这样的库来侦听触摸/鼠标事件，根据此事件更新片段，然后再压平+计算+渲染。
为了播放它，在迭代的片段上进行迭代，为每个片段创建一个AudioBufferSourceNode，它以片段的开始，偏移和持续时间开始。轨道是一组节点或一组节点，一组段节点通过该输出路由到AudioContext目的地。