Получение данных PCM из backend / web audio api waveurfer.js

Я использую wavesurfer.js для создания многодорожечного плеера в Интернете и хочу экспортировать ремиксную версию комбинированных треков с панорамированием уровней и т. Д.

Сначала у меня есть массив audioFiles, и я использую его для создания массива элементов waveurfer.

for(var i=0; i<audiofiles.length; i++){
    spectrum[i] = WaveSurfer.create({

    });
}

Затем я создаю буфер для каждого из них из backend-а.

for(var i=0; i<audiofiles.length; i++){

    var ctx = spectrum[i].backend.ac;
    var length = spectrum[i].getDuration() * sample_rate * 2;
    var ctx_buffer = ctx.createBuffer(2, length, ctx.sampleRate);

    // pass raw pcm buffer to download function
}

И, наконец, я получил некоторую помощь с функцией загрузки здесь Загрузка аудио из Интернета, который был изменен с помощью wavesurfer.js

Моя проблема на данный момент в том, что то, что я передаю функции загрузки, похоже, имеет неправильный формат. Я новичок в работе со звуком и не уверен, что делаю.

Если я передаю переменную ctx_buffer функции в другом вопросе (и использую ее вместо переменной буфера, полученной непосредственно из файла pcm), я получу успешную загрузку, но файл пуст, хотя это правильная длина (если не указывать * 2 в приведенной выше длине, будет пустой файл, равный половине длины моего оригинала).

Здесь есть функция exportPCM () в wavesurfer.js https://wavesurfer-js.org/docs/methods.html но я тоже не знаю, как это работает.

Окончательный код благодаря @AnthumChris

buttons.save_all.addEventListener("click", function(){
    document.getElementById("download_icon").className = "fas fa-spinner loader";
    document.getElementById("download_text").innerText = "Loading...";
    for (let i=0; i<audiofiles.length; i++) {
        const track = spectrum[i];
        const sampleRate = track.backend.ac.sampleRate;
        const audioBuffer = track.backend.buffer;
        const interleavedSamples = getInterleavedStereo(audioBuffer);
        const file_name = `track-${i+1}.wav`; download_init(interleavedSamples.buffer, sampleRate, file_name); } console.log(blobs); }, false); function showError(e) { console.log(`ERROR: ${e}`);
}

var x = 0;
function download_init(ctx_buffer, sample_rate, file_name) {
    const wavBytes = getWavBytes(ctx_buffer, {
        numChannels: 2,
        sampleRate: sample_rate,
        isFloat: true
    });
    blobs[x] = URL.createObjectURL(
        new Blob([wavBytes], { type: 'audio/wav' })
    )
    buttons.download.href = blobs[0];
    buttons.download.setAttribute('download', file_name);
    buttons.save_all.hidden = true;
    buttons.download.hidden = false;
    x++;
}

function getInterleavedStereo(audioBuffer) {
    if (audioBuffer.numberOfChannels !== 2) {
        throw Error('source audio is not stereo');
    }
    const [left, right] = [audioBuffer.getChannelData(0), audioBuffer.getChannelData(1)];
    const interleaved = new Float32Array(left.length + right.length);
    for (let src=0, dst=0; src < left.length; src++, dst+=2) {
      interleaved[dst] =   left[src];
      interleaved[dst+1] = right[src];
    }
    return interleaved;
}

function getWavBytes(buffer, options) {
    const type = options.isFloat ? Float32Array : Uint16Array;
    const numFrames = buffer.byteLength / type.BYTES_PER_ELEMENT;
    const headerBytes = getWavHeader(Object.assign({}, options, { numFrames }));
    const wavBytes = new Uint8Array(headerBytes.length + buffer.byteLength);
    wavBytes.set(headerBytes, 0);
    wavBytes.set(new Uint8Array(buffer), headerBytes.length);
    return wavBytes;
}

function getWavHeader(options) {
    const numFrames = options.numFrames;
    const numChannels = options.numChannels || 2;
    const sampleRate = options.sampleRate || 44100;
    const bytesPerSample = options.isFloat? 4 : 2;
    const format = options.isFloat? 3 : 1;
    const blockAlign = numChannels * bytesPerSample;
    const byteRate = sampleRate * blockAlign;
    const dataSize = numFrames * blockAlign;
    const buffer = new ArrayBuffer(44);
    const dv = new DataView(buffer);

    let p = 0;
    function writeString(s) {
        for (let i=0; i<s.length; i++) {
            dv.setUint8(p + i, s.charCodeAt(i));
        }
        p += s.length;
    }
    function writeUint32(d) {
        dv.setUint32(p, d, true);
        p += 4;
    }
    function writeUint16(d) {
        dv.setUint16(p, d, true);
        p += 2;
    }

    writeString('RIFF');                // ChunkID
    writeUint32(dataSize + 36);         // ChunkSize
    writeString('WAVE');                // Format
    writeString('fmt ');                // Subchunk1ID
    writeUint32(16);                    // Subchunk1Size
    writeUint16(format);                // AudioFormat
    writeUint16(numChannels);           // NumChannels
    writeUint32(sampleRate);            // SampleRate
    writeUint32(byteRate);              // ByteRate
    writeUint16(blockAlign);            // BlockAlign
    writeUint16(bytesPerSample * 8);    // BitsPerSample
    writeString('data');                // Subchunk2ID
    writeUint32(dataSize);              // Subchunk2Size

    return new Uint8Array(buffer);
}

Учитывая, что в настоящее время у вас есть массив AudioBufferобъектов, вы можете чередовать данные PCM Float32Array, содержащиеся в каждом AudioBuffer, а затем использовать этот чередующийся PCM для создания файла RIFF / Wav для загрузки. Если каждый из них AudioBufferявляется дорожкой, тогда все левый / правый каналы в массиве должны быть объединены отдельно и в конце перемежены. Вот как начать с одного AudioBufferтрека:

Преобразование AudioBuffer в ArrayBuffer / Blob для загрузки WAV