DokuWiki

<body>
    <div
    style="background:#222222;color:white;height:100%"
       >
        <canvas id="dial1" nx="dial" min="0" max="100"></canvas>
        <!-- put your canvas tag here -->
        <canvas id="dial2" nx="dial"></canvas>
        <canvas id="dial3" nx="dial" min="0" max="1000" value="200"></canvas>

        <h2>Programming tasks</h2>
        <ol>
            <li>Add another canvas tag. It should have the id dial2 and the nx type of dial. Check that it changes the sound when you move the dial. </li>
            <li>Add a line to the dial1Changed function so that moving the dial changes the value of the lfo's frequency. Put it in an appropriate range for the LFO. </li>
            <li><b>Challenge</b>: add another dial to control the 'depth' of the lfo. The depth is how much it adds or subtracts from the frequency of osc. </li>
        </ol>
    </div>
<script>
var audio_context = window.AudioContext || window.webkitAudioContext;

var con = new audio_context();

// this time, we create two oscillators
var osc = con.createOscillator();
var lfo = con.createOscillator();

// lfo_amp is not an oscillator - it is a 'gain node'
var lfo_amp = con.createGain();
// we set the gain to 200 - it multiplies the input by 200!
lfo_amp.gain.value = 200;

osc.frequency.value = 300;
lfo.frequency.value = 10;

// now for the wiring
// ...
// connect the lfo oscillator
// to the gain node, so it is boosted
// from the range -1 to 1 to -200 to 200
lfo.connect(lfo_amp);
// connect the gain node into the frequency
// control for the main oscillator
lfo_amp.connect(osc.frequency);
// connect the main oscillator to the audio out
osc.connect(con.destination);

// fire em up!
// (you might want to do this in 'onmousedown'
// so they only start when the user clicks)
osc.start();
lfo.start();

  var dial1, dial2, dial3;

   nx.onload = function(){
            nx.colorize('accent', "#FF0000"); // sets accent (default)
            nx.colorize('fill', "#777777"); // sets accent (default)
            dial1.on('*', dial1Changed);  
            dial2.on('*', dial2Changed);
            dial3.on('*', dial3Changed);
            dial1.set({ value: 10 });
            dial2.set({ value: 0.3 });
            dial3.set({ value: 200 });

        };

   function dial1Changed(data){
      // the value of the dial comes in as
      // data.value
      // can you use this to set the frequency of the
      // lfo?
      // make sure you put it in a sensible range
      // for the lfo, e.g. 0-100
      //... write your code here!
      lfo.frequency.value = data.value;

   }

   function dial2Changed(data){
       osc.frequency.value = data.value * 1000;
   }

   function dial3Changed(data){
       lfo_amp.gain.value = data.value;
    }
</script>

</body> <!-- I'm putting the script tag inside the body tag as that is closer to  valid HTML -->