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

时间:2014-01-04 21:11:31

标签: javascript html5 html5-audio web-audio getusermedia

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

这是我正在使用的脚本 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 这是格鲁吉亚语,但我希望你明白这一点。它更像是Helium Pitch。 (注意,我不想改变音频速度。)

当我尝试研究氦气效果时,我发现了这一点: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功能。将它用作缓冲区的转换器。

3 个答案:

答案 0 :(得分:1)

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

那就是说 - “氦音调”看起来很难,因为它会改变你声音的谐波。这听起来更像是声码,声音是调制器和载波,但是移动了谐波带(或类似的东西)。您指向的YouTube视频听起来像,实际上是音高变换,但是使用率校正 - 就像粒度合成一样。查看Chris Rogers的例子http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html - 将速度设置为1.0,将音高设置为大于零(至少几百美分)。这是你正在寻找的效果吗?如果你,你可以深入了解克里斯的例子来看看如何做到这一点,或者在我的输入效果(http://webaudiodemos.appspot.com/input/)中使用像“pitch doubler”这样的实时效果版本(实际上可以设置为更快或更慢,并控制为八度音以外的东西。)

答案 1 :(得分:1)

您想要的粒度效果的代码是可用的。您需要做的唯一事情是将源节点的输出连接到粒度效果页代码的第一个节点。仍然是代码有点乱,但我会尝试在下面解释它。

在代码中进行一些搜索后,看起来音频结构如下:

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

我制作了代码以便它适用于您,请参阅此jsfiddle

这有点难以制作,因为您需要自己设置所有值以适合您想要的值。

所有代码都在jsfiddle中,为了使它工作,你需要做两件事:

  1. 阅读顶部的评论(下载该文件并将其放在与托管文件相同的服务器上,否则CORS确保您无法获取资源。(或者您必须指定一个标题服务器)
  2. 将此代码放在代码中的某处,以便函数playbackRecorderAudio()执行一些有用的操作。如果您向我提供所有代码,我可以帮助您,以确保它有效。
  3. 如果您想要有关代码的任何解释,请随时询问(我不知道您目前对音频API的了解,并解释一切?)

答案 2 :(得分:1)

使用在Web Audio API中实现的FFT(快速傅里叶变换)实现音高移位。 O'Reilly有一本书“Web Audio API”,很好地涵盖了API。您可以看到关于音高和频域here的章节。