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.
<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%; | |
} |
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.