oampo / Audiolet

A JavaScript library for real-time audio synthesis and composition from within the browser
http://oampo.github.com/Audiolet/
Apache License 2.0
893 stars 118 forks source link

Retrieving Output Buffer from a Node #29

Closed ewdicus closed 12 years ago

ewdicus commented 12 years ago

Hello,

I'd like to retrieve the output buffer from a node somewhere inside the graph for use in visualization. When I log this.node.outputs[0].buffer I get an AudioletBuffer who's first channel is a Float32Array with 4096 values. However if I try this.node.outputs[0].buffer.getChannelData(0) or this.node.outputs[0].buffer.channels[0] the Float32Array has length 0. Am I missing something?

Thanks

oampo commented 12 years ago

That sounds odd to me - you're definitely doing this the right way. Can you post up your code somewhere so I can have a look at what's going on? Thanks, Joe

ewdicus commented 12 years ago

Thanks for the quick response. Here's the code, I've just modified an example:

function playExample() {
    var AudioletApp = function() {
        this.audiolet = new Audiolet();
        this.sine = new Sine(this.audiolet, 440);
        this.sine.connect(this.audiolet.output);

        console.log(this.sine.outputs[0].buffer);
        console.log(this.sine.outputs[0].buffer.getChannelData(0));
    };

    this.audioletApp = new AudioletApp();
};

Thanks again.

oampo commented 12 years ago

Ah, okay - this happens because the buffers are created the first time the output requests samples from the Audiolet graph, which hasn't had a chance to happen by the time we get to the console.log calls. If you are just looking to visualise the first n samples then you can manually tick the graph by doing something like:

...
        this.sine.connect(this.audiolet.output);

        // Manually tick the audio processing graph
        this.audiolet.device.tick(new Float32Array(1024), 2);

        console.log(this.sine.outputs[0].buffer);
        console.log(this.sine.outputs[0].buffer.getChannelData(0));
...

Otherwise if you set up a requestAnimationFrame after you have initialised the audio graph then it should get a chance to tick through the first time and you will get sensible sized buffers.

ewdicus commented 12 years ago

Ah, thanks. To clarify, I'll be doing this repeatedly; so, then I don't need to tick it manually, it's just the first time that it's empty? I'll give that a try.

oampo commented 12 years ago

Yup, that's right - tick will be called automatically every time new samples are needed, and the first time this happens the buffers will be populated.