-
Notifications
You must be signed in to change notification settings - Fork 0
/
theremin.html
54 lines (39 loc) · 2.15 KB
/
theremin.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Theremin</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<link rel="stylesheet" href="11.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pizzicato/0.6.4/Pizzicato.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap" rel="stylesheet">
<script src="11.js" type="text/JavaScript"></script>
<script src="11-aux.js" type="text/JavaScript"></script>
</head>
<body>
<h1>An online <span id="thereminLogo">Theremin</span> instrument</h1>
<p>The theremin is an electronic musical instrument invented by <a href="https://en.wikipedia.org/wiki/Leon_Theremin">Leon Theremin</a> in the 1920s.</p>
<p>This demo uses <a href="https://alemangui.github.io/pizzicato/">pizzicato.js</a> to implement a "virtual" Theremin on your browser.</p>
<p>The <code>pizzicato.js</code> library (and other similar ones) use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> to play sounds on the browser.</p>
<form method="get">
<input type="radio" id="sine" name="waveform" value="sine" checked>
<label for="sine">Sine</label><br>
<input type="radio" id="square" name="waveform" value="square">
<label for="square">Square</label><br>
<input type="radio" id="triangle" name="waveform" value="triangle">
<label for="triangle">Triangle</label><br>
<input type="radio" id="sawtooth" name="waveform" value="sawtooth">
<label for="sawtooth">Sawtooth</label><br>
<input type="submit" value="Submit">
</form>
<label for="autotune">Auto tune:</label>
<input type="checkbox" name="autotune" id="autotune"><br>
<label for="pFifth">Perfect fifth:</label>
<input type="checkbox" name="pFifth" id="pFifth"><br>
<p id="dispFreq">Frequency:</p>
<p id="noteName">Note:</p>
<div id="thereminZone"></div>
</body>
</html>