DavidSabine/Web-Audio-API-Theremin.markdown

## index.html
<html>
  <head>
    <!--<script src="{the JS file}"></sript>-->
  </head>
  <body>
  <h1>Web Audio API Theremin</h1>
  <p>Move your mouse around the body of this page.</p>
<ul>
  <li>Horizonal movement controls the frequency of the sound wave.</li>
  <li>Vertical movement controls volume.</li>
</ul>
</body>
</html>

## script.js
var theremin = function () {
	"use strict";
	var osc, instrument, masterLvl;
	return {
		init: function () {
			var audio = new AudioContext;
			osc = audio.createOscillator();
			masterLvl = audio.createGain();
			osc.connect(masterLvl);
			masterLvl.connect(audio.destination);
			osc.start(0);
			instrument = document.querySelector("html");
			instrument.addEventListener("mousemove", theremin.mouseMonitor, false);
		},
		mouseMonitor: function(e) {
			var horizontalMouse = event.clientX;
			var verticalMouse = event.clientY;
			var fv = (55 + (1705 * horizontalMouse/window.innerWidth)); // 5 octaves between C1 and C6
			var gv = 1- verticalMouse/window.innerHeight;
			osc.frequency.value = fv;
			masterLvl.gain.value = gv;
		}
}
}();

window.addEventListener("DOMContentLoaded", theremin.init, true);

## style.css
	html{
		height: 100%;
	}

## Web-Audio-API-Theremin.markdown

      
    Raw
  

              Web-Audio-API-Theremin.markdown
            
          
    Web Audio API Theremin

In honour of Léon Theremin's great invention, this JavaScript controls the frequency and volume of the instrument via mouse movements.
A Pen by David Sabine on CodePen.
License.
	<html>
	<head>
	<!--<script src="{the JS file}"></sript>-->
	</head>
	<body>
	<h1>Web Audio API Theremin</h1>
	<p>Move your mouse around the body of this page.</p>
	<ul>
	<li>Horizonal movement controls the frequency of the sound wave.</li>
	<li>Vertical movement controls volume.</li>
	</ul>
	</body>
	</html>
	var theremin = function () {
	"use strict";
	var osc, instrument, masterLvl;
	return {
	init: function () {
	var audio = new AudioContext;
	osc = audio.createOscillator();
	masterLvl = audio.createGain();
	osc.connect(masterLvl);
	masterLvl.connect(audio.destination);
	osc.start(0);
	instrument = document.querySelector("html");
	instrument.addEventListener("mousemove", theremin.mouseMonitor, false);
	},
	mouseMonitor: function(e) {
	var horizontalMouse = event.clientX;
	var verticalMouse = event.clientY;
	var fv = (55 + (1705 * horizontalMouse/window.innerWidth)); // 5 octaves between C1 and C6
	var gv = 1- verticalMouse/window.innerHeight;
	osc.frequency.value = fv;
	masterLvl.gain.value = gv;
	}
	}
	}();

	window.addEventListener("DOMContentLoaded", theremin.init, true);