Javascript 使用web音频api和wavesurfer.js剪切和粘贴音频

我目前正在尝试制作一个web编辑器，允许用户轻松地调整其音频文件的基本设置，作为一个插件，我集成了wavesurfer.js，因为它的波形有一个非常整洁的跨浏览器解决方案

在为功能列表编制索引后，我决定剪切和粘贴是使该产品正常工作的关键，然而，在花了数小时试图找出如何在现有库中实现这一点，甚至开始从头开始重建wavesurfer.js功能以理解逻辑之后，我还没有成功

我的问题是，是否有人能给我一些关于如何开始构建剪切粘贴功能的建议，或者甚至是一个非常感谢的示例

提前谢谢

wavesurfer插件：

弹拨网络编辑器

编辑解决方案（实例为wavesurfer对象）：

---

有趣的问题。我想到的第一个词是。我不能凭经验说话，但如果我想做到这一点，我会这样做：

假设您选择了音频曲目的一个区域，并希望复制该区域，然后从中制作一个新曲目（稍后可能只是将其附加到现有曲目中）

使用nice wavesurfer.js库提供的

getSelection（）

方法。这将为您提供

开始位置（）

和

结束位置（）

[秒]

考虑到这些要点，您现在可以在后端使用ffmpeg选择区域并将其保存为新文件（最终将其上载到S3等）。查看此内容，了解如何从ruby应用程序调用ffmpeg（此处显示的命令行参数也会有所帮助）

请注意，如果您计划复制和粘贴多个区域以拼凑新曲目，那么始终在后端执行此操作可能毫无意义，我想我会尝试寻找客户端JS方法

我希望这至少对一个简单的用例有帮助，并让您开始接下来的工作；）

更新 这可能值得一读

• Web音频API

  ，教程
• HTML5音频-播放状态。（不要错过关于时间范围的部分，这看起来是一个合理的尝试选项）
• 这（过时，但值得一看，有趣的链接）

阅读此项建议，您可以创建一个与要复制的音频段大小相同的空音频缓冲区（大小=以秒为单位的长度）⨉ 采样率），然后用段中的数据填充其通道数据

所以代码可能是这样的：

var originalBuffer = wavesurfer.backend.buffer;
var emptySegment = wavesurfer.backend.ac.createBuffer(
    originalBuffer.numberOfChannels,
    segmentDuration * originalBuffer.sampleRate,
    originalBuffer.sampleRate
);
for (var i = 0; i < originalBuffer.numberOfChannels; i++) {
    var chanData = originalBuffer.getChannelData(i);
    var segmentChanData = emptySegment.getChannelData(i);
    for (var j = 0, len = chanData.length; j < len; j++) {
        segmentChanData[j] = chanData[j];
    }
}

emptySegment; // Here you go!
              // Not empty anymore, contains a copy of the segment!

var originalBuffer=wavesurfer.backend.buffer；
var emptySegment=wavesurfer.backend.ac.createBuffer(
原始缓冲区.numberOfChannels，
分段持续时间*原始缓冲区.sampleRate，
原始缓冲液
);
对于（变量i=0；i

Hi vint-i-vuit，非常感谢您的输入。我现在有了一个如何设置的方向，我选择客户端方法，因为后端方法可能太重了。成功后，我将确保回报您，并发布我的解决方案。@dennis:我很高兴听到您现在对挑战有了更多的了解：）另外，再看看我更新的答案，我添加了一些链接，可以帮助您开始使用基于JS的方法。非常感谢！事实上，TimeRanges的文章似乎很有希望，我目前正在开发一个Javascript库，以涵盖这些功能，并结合wavesurferjs的波形。它将在github测试版中尽快托管。非常感谢katspaugh！这太棒了！当我将新段粘贴到原始缓冲区时，是否也有方法重新绘制波形。@丹尼斯，是的，有

wavesurfer.loadDecodedBuffer

方法，它需要一个音频缓冲区。看见

var originalBuffer = wavesurfer.backend.buffer;
var emptySegment = wavesurfer.backend.ac.createBuffer(
    originalBuffer.numberOfChannels,
    segmentDuration * originalBuffer.sampleRate,
    originalBuffer.sampleRate
);
for (var i = 0; i < originalBuffer.numberOfChannels; i++) {
    var chanData = originalBuffer.getChannelData(i);
    var segmentChanData = emptySegment.getChannelData(i);
    for (var j = 0, len = chanData.length; j < len; j++) {
        segmentChanData[j] = chanData[j];
    }
}

emptySegment; // Here you go!
              // Not empty anymore, contains a copy of the segment!