htmlweb-audio-apiaudio-recording

HTML5 Web Audio API - Recording Sound Temporary


I'm currently creating a HTML5 music editing program. I started with recording audio. I figured out how to get access on microphon and so on. Code from "Recorder.js" helped me a lot.

But instead of writing into an .wave file I want to create an temporary audiobuffer. I got the Float32Array's from the inputtbuffer in "onaudioprocess" event and saved them all together in one Float32Array. Now I have an Array with values, let's say from 3 Seconds of recording. Now I want to create an Audiobuffer to play the sound I recorded (saved in that array).

In read the ([Webaudio API Specification])1 but didn't found any possibility to create an new audiobuffer with an exisiting Float32Array.

Maybe I'm doing the recording wrong or I'm simply blind in reading. Every other Questions I read were linking on Recorder.js, but I don't want to save a file first and then load it again.

Anyone knowing? Would be awesome.


Solution

  • I'm quite new to javascript but I think you're question is the same as what I was trying to do and now I have found the answer. Instead of calling the recorder.exportWAV function you call the recorder.getBuffer(getBufferCallback) function as you can see below. I hope this helps. it works for me.

    function stopRecording() {
            recorder.stop();
            recorder.getBuffer(getBufferCallback);
    
        //recorder.exportWAV(function(s) {  
            //source = window.URL.createObjectURL(s);
                //audio.src = source;
            //});
    }
    
    function getBufferCallback(buffers) {
        window.newSource = context.createBufferSource();
        window.buffers0 = buffers[0]; /*store the buffers in a variable so you can use them in future*/
        window.buffers1 = buffers[1];
    
        var newBuffer = context.createBuffer(2, window.buffers0.length, context.sampleRate);
        newBuffer.getChannelData(0).set(window.buffers0);
        newBuffer.getChannelData(1).set(window.buffers1);
        window.newSource.buffer = newBuffer;
        window.newSource.connect(context.destination);
        window.newSource.start(0);
    }