Recommendations for audio editing (trim/cut)

[bernardwiesner]

I am investigating the options for audio editing with wavesurfer. I came across this issue: #419, but its almost a decade old, so I am wonder if there are any alternatives/simpler ways of editing, especially trimming and cutting using wavesurfer.

I would especially appreciate a feedback from @katspaugh on this, since you wrote this a decade ago: https://stackoverflow.com/questions/24551854/cut-and-paste-audio-using-web-audio-api-and-wavesurfer-js, but anyone else's feedback is also much appreciated.

How would you implement cropping and trimming bits of audio nowaday's if you would need to? Is the answer above still the best/simplest solution?

Thanks!

[katspaugh]

I think #419 still makes sense.

Basically the steps would be:

1. Set a higher sampleRate in wavesurfer options so that the decoded data is in audio quality
2. Get the decoded data using wavesurfer.getDecodedData on ready
3. Slice the decoded arrays
4. Turn the array back into audio – that's the tricky part

• You could add a WAV header as per Cut & Paste Audio #419 (comment)
• Or encode the audio using the new AudioEncoder API
• Or use some WebAssembly encoder

[katspaugh]

With CLI it would be something like

ffmpeg -i input_file -f f32le -acodec pcm_f32le -ac 1 -ar 44100 pipe:1 | od -v -An -tf4 > output.txt

[bernardwiesner]

that works really well on the cli! But no idea how to do the od -v -An -tf4 part with JS... is it possible?

[bernardwiesner]

Unfortunately I tested using web-assembly (ffmpeg) decoding the audio with above command and the performance was worse than using AudioContext. Memory usage was less, but processing time was much longer.

I think I will have to implement manually cutting the waveform using the sample rate (peaks.length / duration) in order to avoid decoding the audio every time.

peaks.slice(start * sampleRate, end * sampleRate);

[bernardwiesner]

Hi @katspaugh
I have a follow up question on your initial suggestion. You suggested I could use a WebAssembly encoder, do you have any suggestion for one? I tried with ffmpeg but does not seem to support that.

Thanks!

[katspaugh]

I haven't tried any. The first google result: https://github.com/arseneyr/wasm-media-encoders

[Mattnificent]

I was able to implement this super easily with the help from the link by incorporating a second hidden wavesurfer to deal with the encoding challenge:

let wavesurfer = WaveSurfer.create({
    container: '#wave_container_' + row.i,
    waveColor: '#4F4A85',
    progressColor: '#383351'
});

if (isTrimmed) {

    let trim_calc_wavesurfer = WaveSurfer.create({
        container: '#tcwc_' + row.i,
        waveColor: '#4F4A85',
        progressColor: '#383351'
    });

    GetAudioClipBlob(row.i)
        .then((blob) => {
            trim_calc_wavesurfer.loadBlob(blob);
        });

    /** When the audio is both decoded and can play */
    trim_calc_wavesurfer.on('ready', () => {
        console.log('Ready', trim_calc_wavesurfer);

        let fullDuration = trim_calc_wavesurfer.backend.getDuration();
        //let roundDuration = Math.round(fullDuration * 1000) / 1000;

        let startTime = row.s ?? 0;
        let endTime = row.f ?? fullDuration;
        let trimmedDuration = endTime - startTime;

        let originalBuffer = trim_calc_wavesurfer.backend.buffer;
        let startBufferIndex = startTime * originalBuffer.sampleRate;
        let endBufferIndex = endTime * originalBuffer.sampleRate;
        let trimmedBufferLength = trimmedDuration * originalBuffer.sampleRate;


        // Source: https://stackoverflow.com/a/24596314/2413712
        let copiedBuffer = trim_calc_wavesurfer.backend.ac.createBuffer(
            originalBuffer.numberOfChannels,
            trimmedBufferLength,
            originalBuffer.sampleRate
        );

        for (var i = 0; i < originalBuffer.numberOfChannels; i++) {
            let originalChanData = originalBuffer.getChannelData(i);
            let copiedChanData = copiedBuffer.getChannelData(i);

            for (var j = startBufferIndex, k = 0; j < endBufferIndex; j++, k++) {
                copiedChanData[k] = originalChanData[j];
            }
        }

        wavesurfer.loadDecodedBuffer(copiedBuffer);
    });
}
else {

    GetAudioClipBlob(row.i)
        .then((blob) => {
            wavesurfer.loadBlob(blob);
        });
}

This library is brilliant - I am excited to see what else I can do with it!