从 wavesurfer.js 后端/网络音频 api 获取 PCM 数据 [英] Getting PCM data from wavesurfer.js backend/web audio api

问题描述

我正在使用 wavesurfer.js 在线创建一个多轨播放器，并希望导出带有级别平移等的组合曲目的混音版本.

I am using wavesurfer.js to create a multitrack player online and want to export a remixed version of the combined tracks with levels panning etc.

首先，我有一个 audioFiles 数组，并使用它来创建一个 wavesurfer 元素数组.

First I have an array of audioFiles and use this to create an array of wavesurfer elements.

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

然后我从 wavesurfer 后端为每一个创建一个缓冲区

I then create a buffer for each of these from wavesurfer 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修改的音频

And then finally I got some help with the download function here Downloading audio from web that has been modified with wavesurfer.js

此时我的问题是我传递给下载函数的内容似乎格式不正确.我是 Audio 的新手，不确定自己在做什么.

My issue at this point is that what I'm passing to the download function doesn't seem to be in the correct format. I'm new to working with Audio and not sure what I'm doing.

如果我将 ctx_buffer 变量传递给另一个问题中的函数(并使用它而不是直接从 pcm 文件获取的缓冲区变量)，我将成功下载但文件为空，尽管它是正确的长度(省略上面长度中的 *2 将有一个空文件，正好是我原来长度的一半).

If I pass the ctx_buffer variable to the function in the other question (and use it instead of the buffer variable there which is got directly from a pcm file) I will get a successful download but the file is empty, although it is the correct length (leaving out the *2 in the length above will have an empty file exactly half the length of my original).

这里的wavesurfer.js中有一个exportPCM()函数https://wavesurfer-js.org/docs/methods.html 但我也不确定它是如何工作的.

There is an exportPCM() function in wavesurfer.js here https://wavesurfer-js.org/docs/methods.html but I'm not sure how this works either.

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++;
}

推荐答案

鉴于您当前拥有一组 AudioBuffer 对象，您可以交错包含在每个 AudioBuffer<中的 Float32Array PCM 数据/code>，然后使用该交错 PCM 创建要下载的 RIFF/Wav 文件.如果每个 AudioBuffer 都是一个轨道，那么数组中的所有左/右声道必须单独组合并在最后交错.以下是如何从一个 AudioBuffer 轨道开始:

Given that you currently have an array of AudioBuffer objects, you can interleave the Float32Array PCM data contained within each AudioBuffer, and then use that interleaved PCM to create a RIFF/Wav file to download. If each AudioBuffer is a track, then all of the left/right channels in the array must be combined separately and interleaved at the end. Here's how to start with one AudioBuffer track:

将 AudioBuffer 转换为 ArrayBuffer/Blob 以进行 WAV 下载

这篇关于从 wavesurfer.js 后端/网络音频 api 获取 PCM 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！