javascript - 混合 Wav 文件并使用 Web Audio API 将其导出

Question

我是来自日本的网络开发人员。
这是关于堆栈溢出的第一个问题。

我现在正在创建一个简单的音乐 Web 应用程序。
制作音乐系统程序完全是初学者，所以我很难实现它。

作为各种调查的结果，我注意到使用 Web Audio API 是最好的选择，
所以，我决定使用它。

▼ 我想要达到的目标

Multiple Wav files使用 Web 音频 API 加载可以分组为 one Wav file &能够从浏览器下载。

例如，加载多个 wav 文件，如吉他、鼓和钢琴，以及
在浏览器上编辑，最后输出为一个Wav文件。
然后我们可以从浏览器下载编辑过的wav文件，我们就可以播放iTunes了。

▼ 问题

是否可以仅通过使用网络音频 api 来实现此要求？

或者我们需要使用另一个库？

我在 github 上检查了 Record.js，但开发已经停止了大约 2 到 3 年，并且有很多问题，我无法获得支持。所以我决定不使用它。
我也检查了类似的问题 Web audio API: scheduling sounds and exporting the mix

由于资料老了，不知道还能不能用
谢谢。

Answer 1

您好，欢迎来到 Stack Overflow!

是否可以仅使用网络音频 api 来实现这一点？

就将文件合并/混合在一起而言，这是完全可以实现的! This article完成执行您建议的任务所需的许多(如果不是全部)步骤。

您要上传的每个文件都可以加载到 AudioBufferSource (示例在 that article linked before 中解释) 加载音频数据后设置缓冲区源的示例:

play: function (data, callback) {
    // create audio node and play buffer
    var me = this,
        source = this.context.createBufferSource(),
        gainNode = this.context.createGain();
    if (!source.start) { source.start = source.noteOn; }
    if (!source.stop) { source.stop = source.noteOff; }
    source.connect(gainNode);
    gainNode.connect(this.context.destination);
    source.buffer = data;
    source.loop = true;
    source.startTime = this.context.currentTime; // important for later!
    source.start(0);
    return source;
}

然后还有一些特定的节点已经为您的混合目的而设计，例如 ChannelMergerNode (将多个单声道 channel 组合成一个新的 channel 缓冲区)。这是如果您不想自己在 javascript 中处理信号处理，但使用 Web Audio 对象会更快，因为它们是浏览器中的 native 编译代码。

紧接着 complete guide sent before ，还有使用以下代码导出文件的选项(在演示案例中为 .wav):

var rate = 22050;

function exportWAV(type, before, after){
    if (!before) { before = 0; }
    if (!after) { after = 0; }

    var channel = 0,
        buffers = [];
    for (channel = 0; channel < numChannels; channel++){
        buffers.push(mergeBuffers(recBuffers[channel], recLength));
    }

    var i = 0,
        offset = 0,
        newbuffers = [];

    for (channel = 0; channel < numChannels; channel += 1) {
        offset = 0;
        newbuffers[channel] = new Float32Array(before + recLength + after);
        if (before > 0) {
            for (i = 0; i < before; i += 1) {
                newbuffers[channel].set([0], offset);
                offset += 1;
            }
        }
        newbuffers[channel].set(buffers[channel], offset);
        offset += buffers[channel].length;
        if (after > 0) {
            for (i = 0; i < after; i += 1) {
                newbuffers[channel].set([0], offset);
                offset += 1;
            }
        }
    }

    if (numChannels === 2){
        var interleaved = interleave(newbuffers[0], newbuffers[1]);
    } else {
        var interleaved = newbuffers[0];
    }

    var downsampledBuffer = downsampleBuffer(interleaved, rate);
    var dataview = encodeWAV(downsampledBuffer, rate);
    var audioBlob = new Blob([dataview], { type: type });

    this.postMessage(audioBlob);
}

所以我认为 Web-Audio 拥有你想要的一切!然而，根据您的 Web 开发经验，可能具有挑战性，但它绝对值得学习!

我们需要使用另一个库吗？

如果可以的话，我认为绝对值得尝试 Web-Audio ，因为您几乎肯定会获得最佳处理速度，但还有其他库，例如 Pizzicato.js仅举一个。我相信你会发现很多其他的。