Add example code for more complex example
authorcrogers
Mon, 12 Nov 2012 12:02:18 -0800
changeset 204 8124b57b9221
parent 203 09217006984d
child 205 36f092872c08
Add example code for more complex example
webaudio/specification.html
--- a/webaudio/specification.html	Fri Nov 02 11:34:18 2012 -0700
+++ b/webaudio/specification.html	Mon Nov 12 12:02:18 2012 -0800
@@ -525,14 +525,14 @@
 <div class="blockContent">
 <pre class="code"><code class="es-code"> 
 
-            var context = new AudioContext();
-
-            function playSound() {
-                var source = context.createBufferSource();
-                source.buffer = dogBarkingBuffer;
-                source.connect(context.destination);
-                source.start(0);
-            }
+var context = new AudioContext();
+
+function playSound() {
+    var source = context.createBufferSource();
+    source.buffer = dogBarkingBuffer;
+    source.connect(context.destination);
+    source.start(0);
+}
                     </code></pre>
 </div>
 </div>
@@ -541,7 +541,113 @@
 send with a dynamics compressor at the final output stage: </p>
 <img alt="modular routing2" src="images/modular-routing2.png" /> 
 
-<p><span class="ednote">TODO: add Javascript example code here ... </span></p>
+<div class="example">
+
+<div class="exampleHeader">
+Example</div>
+
+<div class="block">
+
+<div class="blockTitleDiv">
+<span class="blockTitle">ECMAScript</span></div>
+
+<div class="blockContent">
+<pre class="code"><code class="es-code"> 
+
+var context = 0;
+var compressor = 0;
+var reverb = 0;
+
+var source1 = 0;
+var source2 = 0;
+var source3 = 0;
+
+var lowpassFilter = 0;
+var waveShaper = 0;
+var panner = 0;
+
+var dry1 = 0;
+var dry2 = 0;
+var dry3 = 0;
+
+var wet1 = 0;
+var wet2 = 0;
+var wet3 = 0;
+
+var masterDry = 0;
+var masterWet = 0;
+
+function setupRoutingGraph () {
+    context = new AudioContext();
+
+    // Create the effects nodes.
+    lowpassFilter = context.createBiquadFilter();
+    waveShaper = context.createWaveShaper();
+    panner = context.createPanner();
+    compressor = context.createDynamicsCompressor();
+    reverb = context.createConvolver();
+
+    // Create master wet and dry.
+    masterDry = context.createGainNode();
+    masterWet = context.createGainNode();
+
+    // Connect final compressor to final destination.
+    compressor.connect(context.destination);
+
+    // Connect master dry & wet to compressor.
+    masterDry.connect(compressor);
+    masterWet.connect(compressor);
+
+    // Connect reverb to master wet.
+    reverb.connect(masterWet);
+
+    // Create a few sources.
+    source1 = context.createBufferSource();
+    source2 = context.createBufferSource();
+    source3 = context.createOscillator();
+
+    source1.buffer = manTalkingBuffer;
+    source2.buffer = footstepsBuffer;
+    source3.frequency.value = 440;
+
+    // Connect source1
+    dry1 = context.createGainNode();
+    wet1 = context.createGainNode();
+    source1.connect(lowpassFilter);
+    lowpassFilter.connect(dry1);
+    lowpassFilter.connect(wet1);
+    dry1.connect(masterDry);
+    wet1.connect(reverb);
+
+    // Connect source2
+    dry2 = context.createGainNode();
+    wet2 = context.createGainNode();
+    source2.connect(waveShaper);
+    waveShaper.connect(dry2);
+    waveShaper.connect(wet2);
+    dry2.connect(masterDry);
+    wet2.connect(reverb);
+
+    // Connect source3
+    dry3 = context.createGainNode();
+    wet3 = context.createGainNode();
+    source3.connect(panner);
+    panner.connect(dry3);
+    panner.connect(wet3);
+    dry3.connect(masterDry);
+    wet3.connect(reverb);
+    
+    // Start the sources now.
+    source1.start(0);
+    source2.start(0);
+    source3.start(0);
+}
+ </code></pre>
+</div>
+</div>
+</div>
+</div>
+
 </div>
 
 <div id="APIOverview-section" class="section">