Add effects to already recorded sound with Web Audio API

Question

My task is to add some effect to the recorded file.

Here is a script in action I'm using Recorder.JS

and here is a code https://github.com/cwilso/AudioRecorder/blob/master/js/recorderjs/recorder.js

I want to add pitch.

I tried looking in other codes which add some effects to the audio. But it seems like recorder.js handles buffers differently.

---

edit

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);
    });
}

here is how my code looks now, with this function, I request already recorded audio and play it back.

Can I simulate some effect to get close to this: http://www.youtube.com/watch?v=Lr80slqJ3zo This is in Georgian but I hope you get the idea. Its more like Helium Pitch. (note, I don't whant to change audio speed).

When I tried to research helium effect I found this: http://chemistry.about.com/b/2013/08/26/helium-voice-is-not-higher-in-pitch.htm it saies that sound should be 2.5 faster then air.

Can I get something close to this?

---

edit

from what @cwilso suggested, http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html is the closest I have seen so far. But I could not manage to modify it, to work with my playbackRecorderAudio(). Thats why I'm starting a bounty with everything I have

---

edit

here is a jsFiddle of my code: http://jsfiddle.net/Lsvnp/1/

First let me describe what I'm trying to achieve: I want to record sound from users microphone, add this effect to it. When user press "stop recording" button (stopRecording function) , it will prepend HTML audio which will allow user to listen what he has recorded. If he likes it, he then will upload it to my server (uploadAudio function)

WHen page is loaded, recording is not initalized. to initialize recording, user has to press some button which will trigger recordAudio function.

Now the problem is that I don't know where to connect my playbackRecorderAudio function. to use it as coverter from buffer.

Answer 1

The code of the granular effect you want is usable. The only thing you need to do is connect the output from your source node to the first node of the granular effects page code. Still that code is a bit messy but I will try to explain it as good as possible beneath.

After some searching in the code, it looks like the audio structure goes like this:

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

I made the code so it works for you, see this jsfiddle

This is a bit hard to make as you need to set all the values yourself to fit what you want.

All the code is in the jsfiddle, and there are two things you have to do to make it work:

1. read the comment on top (download that file and put it on the same server as where you are hosting it, else CORS makes sure you can't fetch the resource. (or you must specify a header on the server)
2. Put this code somewhere in your code, so that the function playbackRecorderAudio() does something useful. I can help you if you provide me all your code, to make sure it works.

If you want any explainment about the code feel free to ask (I do not know your current knowledge about the audio api, and to explain everything?)

Answer 2

You should probably look at using OfflineAudioContext rather than Recorder.JS - OAC can work in faster-than-realtime.

That said - "helium pitch" looks pretty hard to do, as it alters the harmonics of your voice. That sounds more like vocoding, with the voice sound being the modulator and the carrier, but shifting the harmonic bands (or something like that). The YouTube video you pointed to sounded like it was actually pitch-shifted, but with rate correction - like granular synthesis. Check out Chris Rogers' example http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html - set the speed to 1.0, and the pitch to something greater than zero (several hundred cents, at least). Is this the effect you're looking for? If you, you can dig in to Chris' example to see how to do that, or use a live-effect version like the "pitch doubler" in my input effects (http://webaudiodemos.appspot.com/input/) (which can actually be set to be faster or slower, and controlled to be something other than octaves).

Answer 3

Pitch shifting is achieved using FFT (Fast Fourier Transform) which is implemented in the Web Audio API. O'Reilly has a book "Web Audio API" which covers the API nicely. You can see the chapter on Pitch and the Frequency Domain here.