Understanding the “index” parameters to AudioNode.connect

@GeekOnSkatesFeb 14.2021

Hey, happy Valentine’s Day. 🙂

I’ve been struggling hard trying to wrap my puny little human brain around the Web Audio API; it was clearly developed by professional audio… mixologists? mixographers? lol idk… people who understand every last nano-detail of how audio works, to the point where only God knows more. But to us mere mortals, it’s a frustrating rabbit-hole that I’ve gone too far down to quit. 🙂

Anyway, I notice that when I try to connect i.e. an oscillator to a volume control (or “gain” to the mixomystics out there) depending on the phase of the moon and the day of the week, for reasons that are far above and beyond me, I get an “Uncaught DOMException: input index <anything I try> is out of bounds”. I don’t even know what the “bounds” ARE, so… yeah, I’ve kind of just had to fiddle and tinker and experiment to guess out which components are allowed to be connected to which others, but ideally, I’d like to learn what the heck this stupid thing expects for these numbers. The MDN docs point you at their page on “channels” (more super-low-level voodoo) but the channel numbers (i.e. zero for left and 1 for right etc.) don’t work. Anyone here ever fought with this one before?

PS: As a side note, does anyone know of a good Web Audio API walkthrough that can help me convert the magic to logic? Most of what I’ve found on i.e. YouTube is very Hello World 😀

to post a comment

JavaScript

6 Comments(s) _↴

@SempervivumFeb 15.2021 — #@GeekOnSkates#1627959
> for reasons that are far above and beyond me, I get an "Uncaught DOMException: input index <anything I try> is out of bounds". I don't even know what the "bounds" ARE

Please post your code so that we are able to locate the error and explain.

@GeekOnSkatesauthorFeb 15.2021 — #Here's an example (though it doesn't really seem to matter - this error doesn't make much sense unless you actually understand the parameters lol). But here goes:

``// audio = the Web Audio "context" object - I get that part lol<i>
 </i>// osc, vol, and pan are arrays, obviously :)
 osc[i] = audio.createOscillator();
 vol[i] = audio.createGain();
 pan[i] = audio.createStereoPanner();
 
 // And here is the function where the mysterious error occurs if I connect them in the wrong order.
 // apparently oscillators can only connect to gain, and gain can only connect to pan...?
 osc[i].connect(vol[i]);
 vol[i].connect(pan[i]);
 pan[i].connect(audio.destination);
 // If I change up the order, or add a different "node", I get the error.
 // Based on my research, the error is definitely in the second and third parameters of connect(),
 // whatever those may happen to be asking for.  The MDN docs basically say "see channels" but
 // on the page it links to, it gives examples like 0 = left and 1 = right, and others with different
 // configs (one had 0-5 I think etc.). but any number I plug in those parameters also seems to throw.
 // while(!bald) hair--;  :D
 
 // And again, I get what's going on here :)
 osc[i].start();<i>
 </i>``

@SempervivumFeb 16.2021 — #Single backtics don't work reliably when posting code. You better use code tags: `your code here` or triple backtics.

I edited your posting accordingly.

@GeekOnSkatesauthorFeb 17.2021 — #Oh thanks, I was wondering about that. I've used the triple-backtick syntax on BitBucket and other Markdown editors - I also just noticed the preview above what I'm writing right now (tested headings and otehr stuff lol). good to know Markdown syntax works here. U never know from forum to forum), so that was a great idea. I will keep that in mind in future posts. :)

But anyway, returning to the main question, still looking for examples of the "connect" function to see if I can puzzle out what the second and third parameters are meant to be; still no clue apart from the MDN docs, and I must be looking at the wrong part of those or something. And considering I've gotten no feedback apart from some forum etiquette stuff (btw sorry about that lol) my best guess is only Mozilla and other browser vendors understand it. :D So let me ask you this: anyone know a good library that abstracts away all the voodoo? That helps with C programming anyway (lol).

@SempervivumFeb 17.2021 — #@GeekOnSkates#1628105
>considering I've gotten no feedback

As far as I'm concerned I didn't dive into the Webaudio yet and therefore did not have sufficient knowledge to answer your questions.

However, as I found this subject interesting, I assigned myself a task: Create two oscillators and output one on the left channel and the other one on the right channel. After reading MDN and stackoverflow and fiddling I ended up in this demo code:

 &lt;button type="button" onclick="osc1.start();osc2.start();"&gt;Start&lt;/button&gt;
 &lt;script&gt;
 // create audio context
 const audio = new (window.AudioContext || window.webkitAudioContext)();
 
 <i>    </i>    // create oscillator 1 and set frequeny to 2000 Hz
 <i>    </i>    const osc1 = audio.createOscillator();
 <i>    </i>    osc1.frequency.value = 2000;
 
 <i>    </i>    // create oscillator 2 and keep default frequeny (440 Hz)
 <i>    </i>    const osc2 = audio.createOscillator();
 
 <i>    </i>    // output nuber of channels and outputs
 <i>    </i>    console.log(osc1.channelCount); // outputs 2
 <i>    </i>    console.log(osc1.numberOfOutputs); // outputs 1
 
 <i>    </i>    // create a panner for each oscillator 
 <i>    </i>    const pan1 = audio.createPanner();
 <i>    </i>    const pan2 = audio.createPanner();
 <i>    </i>    console.log(pan1.channelCount); // outputs 2
 <i>    </i>    console.log(pan1.numberOfInputs); // outputs 1
 <i>    </i>    console.log(pan1.numberOfOutputs); // outputs 1
 
 <i>    </i>    // connect oscillators to panners
 <i>    </i>    osc1.connect(pan1);
 <i>    </i>    osc2.connect(pan2);
 
 <i>    </i>    // setting the position of the sound
 <i>    </i>    pan1.setPosition(-1, 0, 0); // panner 1 is played on the left channel
 <i>    </i>    pan2.setPosition(1, 0, 0); // panner 2 is played on the right channel
 
 <i>    </i>    // now connect the outputs of the panners
 <i>    </i>    // to one single gain
 <i>    </i>    const gain = audio.createGain();
 <i>    </i>    pan1.connect(gain);
 <i>    </i>    pan2.connect(gain);
 
 <i>    </i>    // finally connect gain to destination of audio
 <i>    </i>    gain.connect(audio.destination);
 <i>    </i>&lt;/script&gt;

One result is that one has to differentiate between channels and inputs/outputs: As visible from the logs I inserted, the nodes I used have two channels, left and right, but only one input and one output. And the 2nd and 3rd parameter of `connect

</C> are inputs and outputs, not channels. Therefore a simple approach to route the oscillators to the left and right channel like this
 <CODE>osc1.connect(gain, 0, 0);
 osc2.connect(gain, 0, 1);</CODE>
 fails as there is only one input on gain.
 
 Remaining questions:
 
 I didn't find any node that has more than one input and output, so what's the benefit of specifying input/output when calling <C>

connect`? Shurely a node exists that has more inputs/outputs.

There are surround sound systems having 5.1 channels. How to switch to them so that 6 channels are available?

@GeekOnSkatesauthorFeb 18.2021 — #I think they tried to plan for every possible physical audio setup that will ever be available on the planet, which is why they made it rocket-science on steroids. That's the only logical explanation of the overkill-level complexity IMO. But if I ever come across a human-readable explanation I will be sure to post it here. :)

Also in #JavaScript _↴

Keypress event does not seem to be captured by MSIE 5.x on Mac Help!!!Image Gallery

Success!

Help @GeekOnSkates spread the word by sharing this article on Twitter...

Tweet This

Understanding the “index” parameters to AudioNode.connect

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Understanding the “index” parameters to AudioNode.connect

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴