[flocking-users] extreme case of unexplicable unknown.

Colin Clark colin at colinclark.org
Mon Jan 5 14:41:36 EST 2015

Hi Derek,

Thanks for all the background information! It sounds like a great project you're working on. Are you working with Clayton Lewis on this?

I've been working with the PhET team for the past few years to help make their sims more accessible, too. The Fluid Project community has recently been doing some work on their Forces and Motion simulation to make it work better without the mouse and with a screenreader. We'll also be sonifying some of the sims. We should collaborate on this! You might find some of Fluid's design resources helpful:


In terms of the issues you raised in your email, there are a few bugs in your code that are preventing it from working. First, you seem to have commented out all the code that involves creating a synth and playing it. Secondly, it looks like you aren't preventing the default action of your form submit button, so the page is reloading every time a user clicks the button. As a result, no sound ever comes out because the page reloads before the sound can start playing.,

Here's some background information that may be helpful: 

Flocking has the concept of an "environment," which is an object that represents the overall audio system. It manages all the synths you create and, when playing, will output samples to your speakers. Typically, you don't need to create an environment yourself; there is a singleton environment available by default at the flock.enviro.shared global property. But the issue you're encountering is that it has to get instantiated first before it is available for you to use. There are two ways to initialize Flocking:

1. Explicitly call flock.init()
2. Instantiate a new flock.synth object, and it will be automatically created for you

If you notice in the sample code you copied from (https://github.com/colinbdclark/Flocking/blob/master/docs/getting-started.md <https://github.com/colinbdclark/Flocking/blob/master/docs/getting-started.md>), it first instantiates a synth, then calls play() afterwards. In your code, you don't explicitly call flock.init(), and you've commented out the code that creates the synth, but not the call to the environment. That's why it's throwing the error. 

Anyway, it's probably best if you call flock.init() explicitly. I just updated Flocking so that a call to flock.init() will return the shared environment, so you can hold on to it in a variable to make things a little shorter. Make sure you update to the latest code.

Once you've initialized Flocking, you create flock.synth objects that represent the particular signal processing algorithm you want. By default, a new synth automatically gets added to the environment, and when you call the play() method on the environment, it will start producing sound. You just initialize Flocking, create your synths, and then call flock.enviro.shared.play(). Easy. Here's a super simple example:

// Initialize Flocking.
var enviro = flock.init();

// Make a new synth.
var mySynth = flock.synth({
    synthDef: {
        ugen: "flock.ugen.sinOsc"

// Tell the environment to start playing.

I've also updated the documentation so that all this is a little bit more clear. Apologies for the confusion.

In case it's useful, I've taken your example and fixed the issues described above, as well as factoring it a little bit more cleanly so that it's easier to see what's going on. I've introduced a new object called "waveSym.app" that represents your "application"--the combination of your synth and logic to update it based on values in the UI. Hopefully this example gets you started:

https://gist.github.com/colinbdclark/43e603eae2e5dac31371 <https://gist.github.com/colinbdclark/43e603eae2e5dac31371>

In the long run, you might find using Fluid Infusion (https://github.com/fluid-project/infusion <https://github.com/fluid-project/infusion>) helpful for making more complex user interfaces like this. 

I hope this helps,


> On Jan 4, 2015, at 7:15 PM, derek riemer <Derek.Riemer at Colorado.EDU> wrote:
> Okay. Here we go. I will give a bit of background into the project first.
> I am on a research team at the university of Colorado, and we are working on symulations that can convey physics concepts to a visually impaired student with more accuracy. See the phet simulations at https://phet.colorado.edu/ <https://phet.colorado.edu/> for more info. Are idea is to sonify these with a high degree of accuracy, and it would be great to have it online. 
> My first little dive into web audio is a little wave sonification thing that would allow a student to listen to the shape of a wave, as it might look on a fft graph. I am using a modification of the code in the amplitude modulation section of the demos, and I modifyed this to work with a combo box, with currently 1 option, but I will extend this to several when this one works.
> There is a place where the user can place several options, (frequency and multiplyer) to change attributes of the wave, like how quickly it cycles.
> When they click the submit button flocking should sonify the wave, using the loudness of the audio to show the amplitude of the wave. For example, a square wave with frequency 1/2 would sound like a blast of pink noise for a half a second, followed by half a second of scilence. 
> Here are my javascript file and my html file. Place the html file in a fla.htm and the other one in myStuff.js. Make a flocking directory with flocking-all.js in it. 
> html:   http://pastie.org/private/jqxspzc2l5n6sqfqb77w <http://pastie.org/private/jqxspzc2l5n6sqfqb77w>
> javascript:   http://pastie.org/private/zyjyeebywppoomzvii4cq <http://pastie.org/private/zyjyeebywppoomzvii4cq>
> On 1/4/2015 4:13 PM, Colin Clark wrote:
>> Hey Derek,
>> Sorry to hear it's not working for you. So it sounds like the examples in the documentation are working, but your own page isn't, right? 
>> It's hard to help troubleshoot without seeing what your code looks like. Can you sent along a Gist (http://gist.github.com <http://gist.github.com/>) or Pastie (http://pastie.org/ <http://pastie.org/>) with the HTML and JavaScript that causes this error?
>> Thanks,
>> Colin
>>> On Jan 4, 2015, at 5:11 PM, derek riemer <Derek.Riemer at Colorado.EDU <mailto:Derek.Riemer at Colorado.EDU>> wrote:
>>> When I try to link to flocking with the <script src="flocking/flocking-all.js"> </script> I get this error in the browser console, and no audio will play. Also if I type flock.enviro.shared in the firefox console I can't find anything for shared. Flock.enviro exists, but flock.enviro.shared doesn't. Any idea what could cause this, as the example I copied from the documentation works fine.
>>> ThankS,
>>> Derek
>>> NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIURI.host]
>>> 2
>>> contentPolicy.js
>>> :369s,
>>> Derek

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

More information about the flocking mailing list