theremin.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Elm 0.17 Theremin</title>
    <script type="text/javascript" src="theremin.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var context = new AudioContext();

      var src = context.createOscillator();

      var mod = context.createOscillator();
      mod.type="square";
      mod.frequency.value = "2";

      var gain = context.createGain();
      var scaler = context.createGain();

      src.connect(gain);
      gain.connect(context.destination);

      mod.connect(scaler);
      scaler.gain.value = 0.02; // TODO adjust when gain control needed
      gain.gain.value = 0.02;
      scaler.connect(gain.gain);

      src.start(0);
      mod.start(0);

      var app = Elm.Theremin.fullscreen();
      app.ports.audio.subscribe(function(scalings) {
        src.frequency.value = 110 * Math.pow(2, scalings.y * 5); // src frequency between 50 and 3050 Hz
        mod.frequency.value = 0.5 + 1000 * scalings.x * scalings.x; // modulation frequency between 0.5 and 1000.5 Hz
      });
    </script>
  </body>
</html>