使用 Web Audio API 为已录制的声音添加效果答案

【问题标题】：Add effects to already recorded sound with Web Audio API使用 Web Audio API 为已录制的声音添加效果
【发布时间】：2014-01-22 11:44:48
【问题描述】：

我的任务是为录制的文件添加一些效果。

这是我正在使用的脚本 Recorder.JS

这是一个代码https://github.com/cwilso/AudioRecorder/blob/master/js/recorderjs/recorder.js

我想添加音调。

我尝试查看为音频添加一些效果的其他代码。但似乎 recorder.js 处理缓冲区的方式不同。

编辑

function playbackRecorderAudio() {
    audioRecorder.getBuffer(function(buffers) {
        var source = audioContext.createBufferSource();
        source.buffer = audioContext.createBuffer(1, buffers[0].length, 44100);
        source.buffer.getChannelData(0).set(buffers[0]);
        source.buffer.getChannelData(0).set(buffers[1]);
        source.connect(audioContext.destination);
        source.noteOn(0);
    });
}

这是我的代码现在的样子，使用这个函数，我请求已经录制的音频并播放它。

我可以模拟一些效果来接近这个：http://www.youtube.com/watch?v=Lr80slqJ3zo 这是格鲁吉亚语，但我希望你能明白。它更像是氦沥青。（注意，我不想改变音频速度）。

当我尝试研究氦效应时，我发现：http://chemistry.about.com/b/2013/08/26/helium-voice-is-not-higher-in-pitch.htm 它说声音应该比空气快 2.5。

我可以得到一些接近这个的东西吗？

编辑

根据@cwilso 的建议，http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html 是迄今为止我所见过的最接近的。但我无法修改它，以使用我的playbackRecorderAudio()。这就是为什么我要开始用我所拥有的一切来赏金

编辑

这是我的代码的 jsFiddle： http://jsfiddle.net/Lsvnp/1/

首先让我描述一下我想要实现的目标：我想从用户麦克风录制声音，添加这个效果。当用户按下“停止录制”按钮（stopRecording 功能）时，它将预先添加 HTML 音频，这将允许用户收听他录制的内容。如果他喜欢，他会上传到我的服务器（uploadAudio函数）

当页面加载时，录制没有初始化。要初始化录制，用户必须按下某个按钮，该按钮将触发recordAudio 功能。

现在的问题是我不知道在哪里连接我的playbackRecorderAudio 函数。将其用作缓冲区的转换器。

【问题讨论】：

标签： javascript html html5-audio web-audio-api getusermedia

【解决方案1】：

你想要的颗粒效果的代码是可用的。您唯一需要做的就是将源节点的输出连接到精细效果页面代码的第一个节点。这段代码还是有点乱，但我会在下面尽量解释清楚。

在代码中搜索了一下，音频结构看起来是这样的：

source -┬-> grainWindowNode -┬-> panner -┬-> dryGain -> compressor -┬-> destination
        └-> bypass          -┘           └-> wetGain -> convolver  -┘

我编写了代码，所以它适用于你，请参阅jsfiddle

这有点难做，因为您需要自己设置所有值以适应您想要的。

所有代码都在 jsfiddle 中，你必须做两件事才能让它工作：

阅读顶部的评论（下载该文件并将其放在托管它的同一服务器上，否则CORS 确保您无法获取资源。（或者您必须在服务器上指定一个标题)
将此代码放在代码中的某个位置，以便函数playbackRecorderAudio() 做一些有用的事情。如果您将所有代码提供给我，我可以为您提供帮助，以确保其正常工作。

如果您想对代码进行任何解释，请随时询问（我不知道您目前对音频 api 的了解，并解释一切？）

【讨论】：

您好@MarijnS95，抱歉回复晚了。我已经阅读了您的 jsFiddle 100 次。这几天我试图阅读一些文档，但这真的很难）我更新了我的问题，你能帮我多一点吗？附言ilustation 有很大帮助，我知道它是如何工作的，我只是不知道在哪里连接
是的，代码做了很多事情。我不知道效果是如何准确生成的，但我知道输入和输出点在哪里。代码在updates jsfiddle。顶部有一条注释说明了连接位置（我刚刚添加了一个输入和输出节点以轻松连接。
小提琴迷路了，所以here is a new one。 this 的输入是 effectsInput 和输出 effectsOutput。
顶级评论也不见了...要通过此效果生成器循环播放声音，最好将其放在 audioInput 和 inputPoint 之间，方法是将以下行：audioInput.connect(inputPoint); 更改为audioInput.connect(effectsInput); effectsOutput.connect(inputPoint);
我无法应用这个，但我放弃了。这并不重要。无论如何，我接受你的回答，因为这提供了几乎没有 webAudio API 知识的人所需要的一切

【解决方案2】：

您可能应该考虑使用 OfflineAudioContext 而不是 Recorder.JS - OAC 可以比实时更快地工作。

也就是说——“氦音调”看起来很难做到，因为它会改变你声音的谐波。这听起来更像是语音编码，语音是调制器和载波，但会改变谐波带（或类似的东西）。您指向的 YouTube 视频听起来实际上是音高变化的，但带有速率校正 - 就像粒状合成一样。查看 Chris Rogers 的示例 http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html - 将速度设置为 1.0，并将音高设置为大于零的值（至少几百美分）。这是你要找的效果吗？如果您愿意，您可以深入研究 Chris 的示例以了解如何做到这一点，或者在我的输入效果 (http://webaudiodemos.appspot.com/input/) 中使用像“音高倍增器”这样的现场效果版本（实际上可以设置为更快或更慢，并且被控制为八度以外的东西）。

【讨论】：

你好@cwilso，很高兴你回答。我看过你的例子，但从来没有运气深入研究它。在我的 chrome 中我有一个错误（可能是因为我的 linux 驱动程序的 WebGL 运气）MAX_VERTEX_TEXTURE_IMAGE_UNITS。我尝试禁用可视化，但我挖掘得越多，错误就越多。和我的firefox（可以显示webGL，它只是重新启动整个浏览器（崩溃）。我喜欢粒度，并且会深入研究它。我猜它并不完美但足够接近。关于OfflineAudoContext - 我不担心这个，因为我想要尽可能广泛的支持。Recorder.js 应该可以处理少于 5 分钟的音频。

【解决方案3】：

使用在 Web Audio API 中实现的 FFT（快速傅里叶变换）实现音高转换。 O'Reilly 有一本书“Web Audio API”很好地涵盖了 API。可以看Pitch and the Frequency Domain章节here。

【讨论】：