有没有办法下载在特定页面上播放的所有音频流的音频文件？答案

【问题标题】：Is there a way to download an audio file of all the audio streams playing on a particular page?有没有办法下载在特定页面上播放的所有音频流的音频文件？
【发布时间】：2020-08-01 06:22:26
【问题描述】：

我正在使用 PizzicatoJS + HowlerJS 构建一个应用程序。这些库本质上允许我同时播放多个音频文件。想象一下 4 个音轨，每个音轨包含一种乐器，如吉他、贝斯、鼓、人声等。

当使用 PizzicatoJS 的 Group 功能或在我所有的嚎叫声上运行 forEach 循环并触发 .play() 时，一切正常。但是，我想下载我从扬声器听到的最终声音。知道如何解决这个问题吗？

我查看了 OfflineAudioContext，但不确定如何使用它来生成音频文件。看起来它需要像 <audio> 标签这样的音频源。我正在尝试做的事情可能吗？任何帮助表示赞赏。

【问题讨论】：

标签： javascript html node.js html5-audio web-audio-api

【解决方案1】：

我认为 OfflineAudioContext 可以帮助您的用例。

假设您要创建一个长度为 10 秒的文件。它应该包含一个从开始到第 8 秒播放的声音。还有另一种声音应该从第 5 秒开始并应该持续到结束。两种声音都是 AudioBuffers（命名为 soundBuffer 和 anotherSoundBuffer）。

您可以按如下方式排列和组合声音。

const sampleRate = 44100;
const offlineAudioContext = new OfflineAudioContext({
    length: sampleRate * 10,
    sampleRate
});

const soundSourceNode = new AudioBufferSourceNode({
    buffer: soundBuffer
});

soundSourceNode.start(0);
soundSourceNode.stop(8);
soundSourceNode.connect(offlineAudioContext.destination);

const anotherSoundSourceNode = new AudioBufferSourceNode({
    buffer: anotherSoundBuffer
});

anotherSoundSourceNode.start(5);
anotherSoundSourceNode.stop(10);
anotherSoundSourceNode.connect(offlineAudioContext.destination);

offlineAudioContext
    .startRendering()
    .then((audioBuffer) => {
        // save the resulting buffer as a file
    });

现在您可以使用库将生成的 AudioBuffer 转换为编码的音频文件。例如audiobuffer-to-wav。

【讨论】：

如何生成可用缓冲区？我试过做一个 XHR 调用 => arrayBuffer => decodeAudioData。但是，当我使用 const soundSourceNode = new AudioBufferSourceNode({ buffer: soundBuffer }) 中的 AudioBuffer 时，我的控制台中出现大量错误。
对不起，我的印象是您已经拥有 AudioBuffers。你的方法看起来不错。这是一些示例代码，展示了如何从文件中获取 AudioBuffer：mdn.github.io/webaudio-examples/decode-audio-data。我希望它有所帮助。