Skip to content

Instantly share code, notes, and snippets.

@DavidSabine
Created June 28, 2014 21:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DavidSabine/4796ace6c509f5762b2a to your computer and use it in GitHub Desktop.
Save DavidSabine/4796ace6c509f5762b2a to your computer and use it in GitHub Desktop.
A Pen by David Sabine.
<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);
html{
height: 100%;
}

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment