-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (86 loc) · 3.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html manifest=theremin.manifest>
<head>
<meta charset=utf-8>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name=viewport content="width=device-width, initial-scale=1">
<link href=http://staticresource.com/data-buttons.css rel=stylesheet>
<link href=http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic rel=stylesheet>
<link type=image/x-icon rel="shortcut icon" href=theremin.png>
<link rel=apple-touch-icon href=theremin.png>
<title>JS Theremin</title>
<style>
html,body{position:fixed;top:0;left:0;width:100%;height:100%;margin:0;background:#333}
input{margin:.5em 0 .5em .5em !important;}
div{padding:0 1em;color: white;font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;}
</style>
</head>
<body>
<input value=sine type=button data-button=grey>
<input value=triangle type=button data-button=blue>
<input value=square type=button data-button=green>
<input value=sawtooth type=button data-button>
<div id=output></div>
<script>
// The Synth
var synth = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext)(),
osc = synth.createOscillator(),
gain = synth.createGain(),
output = document.getElementById('output')
osc.type = 'sawtooth'
osc.connect(gain)
gain.gain.value = 0
gain.connect(synth.destination)
osc.start()
// Variables
var active = false,
volume = 0,
freq = 0
// Mouse Controls
document.addEventListener('mousedown',function(e){capture(e)})
document.addEventListener('mousemove',function(e){drag(e)})
document.addEventListener('mouseup',function(e){release(e)})
// Touch Controls
document.addEventListener('touchstart',function(e){capture(e)})
document.addEventListener('touchmove',function(e){drag(e)})
document.addEventListener('touchend',function(e){release(e)})
// Start the Note
function capture(e){
e.preventDefault()
active = true
volume = ~~((e.clientX||e.touches[0].clientX)/window.innerWidth*100)/100
freq = ~~(1000*(1-((e.clientY||e.touches[0].clientY)/window.innerHeight)))
osc.frequency.value = freq
gain.gain.value = volume
output.innerHTML = 'Frequency = '+freq+'hz, Volume = '+~~(volume*100)+'%'
}
// Update the properties of the note
function drag(e){
e.preventDefault()
if (active) {
volume = ~~((e.clientX||e.touches[0].clientX)/window.innerWidth*100)/100
freq = ~~(1000*(1-((e.clientY||e.touches[0].clientY)/window.innerHeight)))
osc.frequency.value = freq
gain.gain.value = volume
output.innerHTML = 'Frequency = '+freq+'hz, Volume = '+~~(volume*100)+'%'
}
}
// Release The Note
function release(e){
active = false
gain.gain.value = 0
output.innerHTML = ''
}
// Make UI buttons control type
var button = document.getElementsByTagName('input')
for (i=0;i<button.length;i++){
button[i].addEventListener('click',function(){switchType(this.value)})
button[i].addEventListener('touchstart',function(){switchType(this.value)})
}
function switchType(type){
osc.type = type
}
</script>
</body>
</html>