forked from omnikrll/convex
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (106 loc) · 4.05 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>convex</title>
<link rel="stylesheet" type="text/css" href="convex.css">
</head>
<body>
<div id="loading" class="loading">
<div class="spinner">
<img src="loading-spinner.gif"/>
<h1>loading...</h1>
</div>
</div>
<div class="content">
<div class="header">
<h1>convex</h1>
<p>a simple sampling synth built using the web audio api</p>
</div>
<div class="modules">
<div class="module source">
<h4>Source</h4>
<select id="carrierMenu" onchange="toggleCarrier(this);">
</select>
</div>
<div class="module impulse">
<h4>Impulse</h4>
<select id="modulatorMenu" onchange="toggleConvolver(this);">
<option> --- </option>
</select>
</div>
<div class="module filter">
<h4>Filter</h4>
<div style="margin-bottom: 1em;">
<h5>type</h5>
<select id="filterTypePicker" onchange="filterType(this);">
<option value="lowpass">Lowpass</option>
<option value="highpass">Highpass</option>
<option value="bandpass">Bandpass</option>
<option value="lowshelf">Low Shelf</option>
<option value="highshelf">High Shelf</option>
<option value="peaking">Peaking</option>
<option value="notch">Notch</option>
<option value="allpass">Allpass</option>
</select>
</div>
<div class="sliders">
<div class="input-slider">
<input id="filterFreqInput" type="range" min="0" max="1" step="0.01" value="1" oninput="filterFrequency(this);">
<h5>freq</h5>
</div>
<div class="input-slider">
<input id="filterQInput" type="range" min="0" max="1" step="0.01" value="0" oninput="filterQ(this);">
<h5>q</h5>
</div>
</div>
</div>
<div class="module output">
<h4>level</h4>
<div class="sliders">
<div class="input-slider">
<input id="fadeInLevel" type="range" min="0" max="20000" value="0" oninput="updatefadeIn(this);">
<h5>attack</h5>
<!-- <h5><span id="fade-in">0</span> ms</h5> -->
</div>
<div class="input-slider">
<input id="fadeOutLevel" type="range" min="0" max="20000" value="0" oninput="updatefadeOut(this);">
<h5>release</h5>
<!-- <h5><span id="fade-out">0</span> ms</h5> -->
</div>
<div class="input-slider">
<input id="masterVolumeInput" type="range" min="0" max="100" value="100" oninput="masterVolumeLvl(this);">
<h5>output</h5>
<!-- <h5><span id="volume-level">100</span>%</h5> -->
</div>
</div>
</div>
</div>
<div id="keyboard-map" class="map-area">
<div id="row1" class="row">
<div class="ascii" id="ascii_87"><span>w</span></div>
<div class="ascii" id="ascii_69"><span>e</span></div>
<div class="ascii" style="visibility: hidden;"></div>
<div class="ascii" id="ascii_84"><span>t</span></div>
<div class="ascii" id="ascii_89"><span>y</span></div>
<div class="ascii" id="ascii_85"><span>u</span></div>
</div>
<div id="row2" class="row">
<div class="ascii" id="ascii_65"><span>a</span></div>
<div class="ascii" id="ascii_83"><span>s</span></div>
<div class="ascii" id="ascii_68"><span>d</span></div>
<div class="ascii" id="ascii_70"><span>f</span></div>
<div class="ascii" id="ascii_71"><span>g</span></div>
<div class="ascii" id="ascii_72"><span>h</span></div>
<div class="ascii" id="ascii_74"><span>j</span></div>
<div class="ascii" id="ascii_75"><span>k</span></div>
</div>
<div class="octave-display">
<span class="octave-inc" id="octave-down"> < </span>
<span>Current Octave: C<span id="octave-val">4</span></span>
<span class="octave-inc" id="octave-up"> > </span>
</div>
</div>
</div>
<script src="convex.js"></script>
</body>
</html>