MIX Wav 文件并使用 Web Audio 导出 API

Question

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

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

经过各种调查，我注意到使用网络音频 API 是最佳选择，所以，我决定使用它。

▼ 我想达到的目标

Multiple Wav files load with the Web audio 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？

就 merging/mixing 文件而言，这是完全可以实现的！ This article 执行您建议的任务所需的许多（如果不是全部）步骤。

您要上传的每个文件都可以加载到 AudioBufferSource (examples explained in 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（将多个单声道组合到一个新的通道缓冲区中）。如果您不想在 javascript 中自己处理信号，但使用 Web Audio 对象会更快，因为它们是浏览器中已有的本机编译代码。

在 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, as you'll almost definately get the best speeds for processing, but there are other libraries such as Pizzicato.js 绝对值得一试。我相信您会找到很多其他的。

MIX Wav 文件并使用 Web Audio 导出 API

MIX Wav file and export it with Web Audio API

javascript

audio

web-audio-api

▼ 我想达到的目标

▼ 问题

是否可以仅使用网络音频实现此目的api？

我们需要使用其他库吗？