-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
57 lines (54 loc) · 2.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>midio: generative synthetic radio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/range.css">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/colors.css">
<!-- style.css placed after to override other stylesheets
with equal specificity. -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="Visualizer" class="visualizer">
<h1>midio</h1>
<p style="font-size: 1.1rem" class="light-font">generative synthetic radio</p>
<p class="light-font">created by <a href="http://evangipson.com">evan gipson</a></p>
<div class="calls-to-action">
<button id="ShowControls"></button>
<button id="RandomizeControls">Generate New Song</button>
<a href="https://github.com/evangipson/midio"><button>View Source</button></a>
</div>
</section>
<section class="controls" id="ControlList">
<section class="panel">
<h2>LFO</h2>
<label for="rate">Rate<input name="rate" id="LFORate" type="range"></label>
<label for="depth">Depth<input name="depth" id="LFODepth" type="range"></label>
<h2>Noise</h2>
<label for="whiteNoise">White<input name="whiteNoise" id="WhiteNoise" type="range"></label>
<label for="pinkNoise">Pink<input name="pinkNoise" id="PinkNoise" type="range"></label>
<label for="brownNoise">Brown<input name="brownNoise" id="BrownNoise" type="range"></label>
<h2>Waves</h2>
<label for="sine">Sine<input name="sine" id="Sine" type="range"></label>
<label for="square">Square<input name="square" id="Square" type="range"></label>
<label for="triangle">Triangle<input name="triangle" id="Triangle" type="range"></label>
<label for="saw">Sawtooth<input name="saw" id="Saw" type="range"></label>
</section>
<section class="panel">
<h2>Main</h2>
<label for="volume">Volume<input name="volume" id="MasterVolume" type="range"></label>
<label for="mood">Mood<input name="mood" id="Mood" type="range"></label>
<label for="baseNote">Pitch<input name="baseNote" id="BaseNote" type="range"></label>
<label for="softness">Softness<input name="softness" id="Softness" type="range"></label>
<label for="tempo">Tempo<input name="tempo" id="Tempo" type="range"></label>
<h2>Toggles</h2>
<label for="autoplay">Autoplay<input name="autoplay" id="Autoplay" type="range"></label>
<label for="evolve">Evolve<input name="evolve" id="Evolve" type="range"></label>
</section>
</section>
<script type="text/javascript" src="src/main.js"></script>
</body>
</html>