Cut and paste audio using web audio api and waveurfer.js

I'm currently trying to create a web editor that allows users to easily configure basic settings for their audio files, as a plugin that I integrated waveurfer.js, since it has a very neat and cross-browser solution for this waveform.

After indexing the required list of functionalities, I decided that cutting and pasting is necessary for this product to work, however, spending hours trying to figure out how to implement this in the existing library and even start rebuilding waveurfer.js functions from scratch to understand the logic that I not yet had time.

My question will be if someone can give me some guidance on how to start creating cut and paste functions, or maybe even an example that would be greatly appreciated.

Thanks in advance!

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

tweaked web editor http://plucked.de

EDIT Solution (instance - waveurfer. 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')
  }
}
+3
source share
2 answers

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

, :

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!
+5

. , , - ffmpeg. , , :

, , (, , ).

  • getSelection(), waveurfer.js. startPosition() endPosition() [ ].
  • , ffmpeg , ( S3 ..). . , , ffmpeg ( , , ).

, , , , , , , JS .

, , , , ;)

.

  • Web Audio API, .
  • HTML5 audio - . ( TimeRanges, , ).
  • (, , ).
+3

Source: https://habr.com/ru/post/1546994/


All Articles