[flocking] sonogram

Colin Clark colin at colinclark.org
Mon Nov 9 15:29:46 UTC 2015

Thanks, Adam!

Alfredo, there are a couple of caveats with using native Web Audio Nodes in Flocking right now. At the moment, they're restricted to being located at either the beginning or the end of the node graph. So in the case of the AnalyserNode, you're restricted to visualizing all Flocking synths that are currently sounding; you can't visualize only an individual synth or unit generator.

The alternative, if you need to be able to visualize individual ugens or synths, is to write your own sonogram unit generator using the ArrayMath FFT library that ships with Flocking. I could coach you through it if you're interested.

This isn't, of course, ideal. I am working on a new architecture for Flocking 0.4.0 that will allow you to easily interleave Flocking unit generators with Web Audio native nodes. In the interim, there is a basic API for managing input and output nodes. I recommend using the unreleased 0.2.0 version (the master branch in Github, available for testing here: http://flockingjs.org/next/) if you're doing any work with native nodes; I've substantially improved support there.

Here's how you can insert a node into the output chain after the Flocking Script Processor Node using Flocking 0.2.0:

var enviro = flock.init(),
      context = enviro.audioSystem.context;

var analyser = flock.environment.audioSystem.nativeNodeManager.createOutputNode({
    node: "Analyser",
    props: {
        fftSize: 2048

I hope this helps, and I'm looking forward to seeing what you make with Flocking!


> On Nov 9, 2015, at 8:30 AM, Adam Tindale <adamrtindale at gmail.com> wrote:
> Hi, 
> There isn't a sonogram builtin but there are a few examples of sonograms across the web. 
> Google has a very nice WebGL demo here: 
> https://chromium.googlecode.com/svn/trunk/samples/audio/visualizer-gl.html <https://chromium.googlecode.com/svn/trunk/samples/audio/visualizer-gl.html>
> Flocking.js runs in a ScriptProcessorNode of WebAudio. What you would have to do to wire these two examples together is to get Flocking.js to be in the audio chain before their analyserNode. 
> There is a simple and clear example on MDN about this, though the demo shows a frequency histogram instead of a sonogram:
> https://developer.mozilla.org/en/docs/Web/API/AnalyserNode <https://developer.mozilla.org/en/docs/Web/API/AnalyserNode>
> a
> On Sun, 8 Nov 2015 at 16:31 Alfredo Ardia <alfredoardia at gmail.com <mailto:alfredoardia at gmail.com>> wrote:
> Hi all,
> I just started to use flocking, it's great!
> I am looking for a way to visualize sounds with a real time sonogram/spectrogram instead of the scope.. is there any sonogram ugen?
> _______________________________________________
> flocking mailing list
> flocking at lists.idrc.ocad.ca <mailto:flocking at lists.idrc.ocad.ca>
> http://lists.idrc.ocad.ca/mailman/listinfo/flocking <http://lists.idrc.ocad.ca/mailman/listinfo/flocking>
> _______________________________________________
> flocking mailing list
> flocking at lists.idrc.ocad.ca
> http://lists.idrc.ocad.ca/mailman/listinfo/flocking

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/flocking/attachments/20151109/1f1ade48/attachment.html>

More information about the flocking mailing list