WebAudioFreqGain.html

## WebAudioFreqGain.html
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>WebAudio OSC Output Example - 2 Variables</title>
<!-- By Scott Hawley @drscotthawley.  Modified from https://github.com/automata/osc-web/blob/master/web-side/app.html
No additional license restrictions are introduced with these modifications; the automata/osc-web site gives no license info.
Thus as far as this author is concerned: "unlimited license": feel free to use & modify in any way you wish!  -->
</head>

<body>
<h2>WebAudio OSC Output Example - 2 Variables</h2>

<p>Following <a href="https://www.jroehm.com/2015/10/a-simple-guide-to-use-osc-in-the-browser/">instructions
by Juergen Rohm</a>, I grabbed the <a href="https://github.com/automata/osc-web">Open Sound Control Web Bridge</a>
and hooked it up to some WebAudio code for controlling the frequency of an oscillator.</p>

<p>To use it, follow the instructions on either Juergen's page or the OSC-Web github page, and run the bridge app. ("node bridge.js").
Then just open this HTML page.<p>

<p><i>Note that reloading the web page typically causes the OSC bridge server to crash, so you'll need to re-run it.</i></p>
<br>
<hr/>
<div>Listening on port 12000 (<a href="http://www.wekinator.org/">Wekinator</a> default).<br>First input adjusts the frequency, second input adjusts the gain.<div>

<p>Received Wekinator OSC message: <span id="status"></span></p>
<p>Current frequency is:<span id="frequency"></span> Hz<br>
Current gain is:<span id="gain"></span></p>

<hr />
<p>--<a href="http://drscotthawley.github.io">Scott Hawley</a></p>


<script src="http://127.0.0.1:8081/socket.io/socket.io.js"></script>

<script>
    //==================== WebSocket-handling Code ============
   socket = io.connect('http://127.0.0.1', { port: 8081, rememberTransport: false});
   console.log('oi');
   socket.on('connect', function() {
        // sends to socket.io server the host/port of oscServer
        // and oscClient
        socket.emit('config',
            {
                server: {
                    port: 12000,        // listens on this port
                    host: '127.0.0.1'
                },
                client: {
                    port: 3334,       // sends on this port (unused)
                    host: '127.0.0.1'
                }
            }
        );
    });


  //==================== Main WebAudio-handling Code ============
  if ((window.AudioContext === undefined) && (window.webkitAudioContext === undefined)) {
                //return
    	alert('The Web Audio API is not supported in your browser!');

        }

  // create web audio api context
  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

  // create Oscillator and gain node
  var oscillator = audioCtx.createOscillator();
  var gainNode = audioCtx.createGain();

  // connect oscillator -> gain node -> 'speakers'
  oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  // Choices for initial frequency and volume
  var initialFreq = 440;                  // value in Hertz
  var initialGain = 0.2;                  // tip: Don't start it too loud

  // Assign options for the oscillator
  oscillator.type = 'sine';
  oscillator.frequency.value = initialFreq;

  oscillator.start(0);                    // Play the tone

  gainNode.gain.value = initialGain;       // Note that we waited until after the osc. was started to "turn up" the gain

  //=============================== end main Webaudio code


  //==============  When we get a socket message ==============
  socket.on('message', function(obj) {
      var status = document.getElementById("status");
      // status[0] is the message name (from wekinator), the other elements of status are the values
      msg_name = obj[0]
      if ('/wek/outputs' == msg_name) {

        status.innerHTML = obj             // update the 'status' display with what was received.

        freq_factor = obj[1] / 0.5        // Middle of Wekinator range will leave freq at Initial value
        gain_factor = obj[2] / 0.5        // Middle of Wekinator range will leave gain at Initial value

        // Change the oscillator values
        oscillator.frequency.value = initialFreq * freq_factor
        gainNode.gain.value = initialGain * gain_factor

        // Update the display
        frequency.innerHTML = oscillator.frequency.value
        gain.innerHTML = gainNode.gain.value
      } else {
        console.log('Ignoring non-Wekinator socket message:'+obj);
      }
   });    // end of socket.on

</script>

<!--- Unused: <button onclick="socket.emit('message', '/foobar');">Send OSC message</button>  -->

</body> </html>