剪切和使用网络音频API和wavesurfer.js粘贴音频 [英] Cut and Paste audio using web audio api and wavesurfer.js

问题描述

我目前正在做一个网页编辑器允许用户轻松地调整基本设置自己的音频文件，作为一个插件，我已经集成wavesurfer.js，因为它有一个非常整洁，跨浏览器的解决方案，它的波形。

对于索引我已经决定，剪切和粘贴是使得这款产品工作至关重要的功能必须具备的名单，但是花费试图找出如何实现这种在现有的库数小时甚至启动后经过从头开始重建wavesurfer.js功能，了解我还没有成功的逻辑。

我的问题是，如果任何人都可以给我如何开始建立剪切和粘贴功能，一些指针，或者甚至一个例子，这将是极大的AP preciated。

在此先感谢！

WaveSurfer示波器插件：
http://wavesurfer-js.org

采网页编辑器
http://plucked.de

编辑解决方案（例如是WaveSurfer示波器的对象。）

 功能切（实例）{
  VAR的选择= instance.getSelection（）;
  如果（选择）{
    VAR original_buffer = instance.backend.buffer;
    VAR new_buffer = instance.backend.ac.createBuffer（original_buffer.numberOfChannels，original_buffer.length，original_buffer.sampleRate）;    VAR first_list_index =（selection.startPosition * original_buffer.sampleRate）;
    VAR second_list_index =（selection.endPosition * original_buffer.sampleRate）;
    变种second_list_mem_alloc =（original_buffer.length  - （selection.endPosition * original_buffer.sampleRate））;    VAR new_list =新Float32Array（parseInt函数（first_list_index））;
    VAR second_list =新Float32Array（parseInt函数（second_list_mem_alloc））;
    VAR合并=新Float32Array（original_buffer.length）;    original_buffer.copyFromChannel（new_list，0）;
    original_buffer.copyFromChannel（second_list，0，second_list_index）    combined.set（new_list）
    combined.set（second_list，first_list_index）    new_buffer.copyToChannel（组合，0）;    instance.loadDe codedBuffer（new_buffer）;
  }其他{
    的console.log（'没有发现选择'）
  }
}
 

解决方案

阅读本回答建议你可以创建一个空要复制的音频段的大小AudioBuffer（大小=以秒为单位⨉采样速率的长度），然后与来自段相关的数据填补其信道的内容

所以，code的可能的是这样的：

  VAR originalBuffer = wavesurfer.backend.buffer;
VAR emptySegment = wavesurfer.ac.createBuffer（
    originalBuffer.channels，
    segmentDuration * originalBuffer.sampleRate，
    originalBuffer.sampleRate
）;
对于（VAR I = 0; I＆LT; originalBuffer.channels;我++）{
    变种CHANDATA = originalBuffer.getChannelData（ⅰ）;
    变种segmentChanData = emptySegment.getChannelData（ⅰ）;
    对于（VAR J = 0，LEN = chanData.length; J＆LT; LEN; J ++）{
        segmentChanData [J] = CHANDATA [J]。
    }
}emptySegment; // 干得好！
              //不空了，包含段的副本！
 

I am currently trying to make a web editor allowing users to easily adjust basic settings to their audio files, as a plugin I've integrated wavesurfer.js as it has a very neat and cross-browser solution for it's waveform.

After indexing a must-have list for the functionalities I've decided that the cut and paste are essential for making this product work, however after spending hours of trying to figure out how to implement this in the existing library and even starting to rebuild the wavesurfer.js functionalities from scratch to understand the logic I have yet to succeed.

My question would be if anyone can give me some pointers on how to start building a cut and paste functionality or maybe even an example that would be greatly appreciated.

Thanks in advance!

wavesurfer plugin: http://wavesurfer-js.org

plucked web editor http://plucked.de

EDIT Solution (instance is the wavesurfer object.):

function cut(instance){
  var selection = instance.getSelection();
  if(selection){
    var original_buffer = instance.backend.buffer;
    var new_buffer      = instance.backend.ac.createBuffer(original_buffer.numberOfChannels, original_buffer.length, original_buffer.sampleRate);

    var first_list_index        = (selection.startPosition * original_buffer.sampleRate);
    var second_list_index       = (selection.endPosition * original_buffer.sampleRate);
    var second_list_mem_alloc   = (original_buffer.length - (selection.endPosition * original_buffer.sampleRate));

    var new_list        = new Float32Array( parseInt( first_list_index ));
    var second_list     = new Float32Array( parseInt( second_list_mem_alloc ));
    var combined        = new Float32Array( original_buffer.length );

    original_buffer.copyFromChannel(new_list, 0);
    original_buffer.copyFromChannel(second_list, 0, second_list_index)

    combined.set(new_list)
    combined.set(second_list, first_list_index)

    new_buffer.copyToChannel(combined, 0);

    instance.loadDecodedBuffer(new_buffer);
  }else{
    console.log('did not find selection')
  }
}

解决方案

Reading this answer suggests you can create an empty AudioBuffer of the size of the audio segment you want to copy (size = length in seconds ⨉ sample rate), then fill its channel data with the data from the segment.

So the code might be like this:

var originalBuffer = wavesurfer.backend.buffer;
var emptySegment = wavesurfer.ac.createBuffer(
    originalBuffer.channels,
    segmentDuration * originalBuffer.sampleRate,
    originalBuffer.sampleRate
);
for (var i = 0; i < originalBuffer.channels; 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!

这篇关于剪切和使用网络音频API和wavesurfer.js粘贴音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！