从waveurfer.js后端/网络音频api获取PCM数据

Question

我正在使用wavesurfer.js在线创建多轨道播放器，并希望导出具有水平平移等功能的组合轨道的重新混合版本。

首先，我有一个audioFiles数组，并使用它创建一个waveurfer元素数组。

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

    });
}

然后我为waveurfer后端的每个缓冲区创建一个缓冲区

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
}

最后，我在这里的下载功能上获得了一些帮助Downloading audio from web that has been modified with wavesurfer.js

我现在的问题是，我传递给下载功能的内容似乎格式不正确。我是刚接触音频的新手，不确定自己在做什么。

如果我将ctx_buffer变量传递给另一个问题中的函数（并使用它而不是直接从pcm文件中获得的那里的buffer变量，则可以成功下载，但文件为空，尽管它是正确的长度（忽略上面的* 2长度，将得到一个空文件，长度恰好是我原始文件的一半）。

[wavesurfer.js在此处https://wavesurfer-js.org/docs/methods.html中有一个exportPCM（）函数，但我也不知道这是如何工作的。

编辑

buttons.save_all.addEventListener("click", function(){
    document.getElementById("download_icon").className = "fas fa-spinner loader";
    document.getElementById("download_text").innerText = "Loading...";

    var length = spectrum[0].getDuration()*44100*2;
    for(var i=0; i<audiofiles.length; i++){
        var ctx = spectrum[i].backend.ac;
        var sample_rate = ctx.sampleRate;
        var length = spectrum[i].getDuration()*sample_rate*2;

        var ctx_buffer = ctx.createBuffer(2, length, ctx.sampleRate);

        download_init(ctx_buffer,length,sample_rate).catch(showError);
    }
}, false);

function showError(e) {
    console.log(`ERROR: ${e}`);
}

var x = 0;
async function download_init(ctx_buffer,length,sample_rate) {
    // const buffer = await (await fetch(url)).arrayBuffer()

    const wavBytes = getWavBytes(ctx_buffer, {
        numFrames: ctx_buffer.length,
        numChannels: 1,
        sampleRate: sample_rate,
        isFloat: false
    });
    console.log(wavBytes);

    blobs[x] = URL.createObjectURL(
        new Blob([wavBytes], { type: 'audio/wav' })
    )

    document.getElementById("btn_download").href = blobs[0];
    document.getElementById("btn_download").setAttribute('download', 'download.wav');

    document.getElementById("btn_save_all").hidden = true;
    document.getElementById("btn_download").hidden = false;

    x++;
}

Answer 1

鉴于您当前具有AudioBuffer个对象的数组，可以对每个AudioBuffer中包含的Float32Array PCM数据进行交织，然后使用该交织的PCM创建要下载的RIFF / Wav文件。如果每个AudioBuffer是一个音轨，则必须将阵列中的所有左/右声道分别组合并在最后进行交织。这是从一个AudioBuffer曲目开始的方法：

Convert AudioBuffer to ArrayBuffer / Blob for WAV Download