forked from mdn/voice-change-o-matic
/
index.html
144 lines (117 loc) · 4.76 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Voice-change-O-matic</title>
<!--[if le IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="scripts/respond.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href='https://fonts.googleapis.com/css?family=Righteous|Nova+Square' rel='stylesheet' type='text/css'>
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<link href="styles/app.css" rel="stylesheet" type="text/css">
<script src="scripts/input-knobs.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1>Voice-change-O-matic</h1>
</header>
<canvas class="visualizer" width="640px" height="100px"></canvas>
<form class="controls">
<div class="container">
<div class="container-settings">
<label for="voice">Voice setting</label>
<select id="voice" name="voice">
<option value="distortion">Distortion</option>
<option value="convolver">Reverb</option>
<option value="biquad">Bass Boost</option>
<option value="off" selected>Off</option>
</select>
</div>
<div class=container-options-hidden id="distortion">
Amount <br>
<input type="range" min="0" max="800" step="50" class="input-knob" id="distortion-value"/>
</div>
<div class=container-options-hidden id="convolver">
Level <input type="range" class="input-knob" />
</div>
<div class=container-options-hidden id="biquad">
<div style="display:inline-block;"> Freq.
<input type="range" min="125" max="6000" step="125" value=1000 class="input-knob" id="byquad-freq"/>
</div>
<div style="display:inline-block;"> Gain
<input type="range" min="0" max="40" step="5" value=26 class="input-knob" id="byquad-gain"/>
</div>
<div style="display:inline-block; float=right;"> Q factor
<input type="range" min="0" max="20" step="0.5" value=10 class="input-knob" id="byquad-Qfac"/>
</div>
<div>
Filter type: <br>
<select id="byquad-type" />
<option value="lowshelf" selected>Lowshelf</option>
<option value="lowpass">Lowpass</option>
<option value="highpass">Highpass</option>
<option value="highshelf">Highshelf</option>
<option value="peaking">Peak</option>
<option value="notch">Notch</option>
<option value="allpass">Allpass</option>
</select>
</div>
</div>
<div class=container-options id="off">
</div>
</div>
<div class=container>
<div class="container-settings">
<label for="visual">Visualizer setting</label>
<select id="visual" name="visual">
<option value="sinewave">Sinewave</option>
<option value="frequencybars" selected>Frequency bars</option>
<option value="off">Off</option>
</select>
</div>
<div class=container-options id="off">
</div>
</div>
<div class=container>
<a class="rec">Mic off</a>
<a class="mute">Mute nodes</a>
</div>
<div class=container>
<label for = "peakInfo"> Data</label>
<center>
<div class="commonText" style="float:left;">f in <textarea id="peakInfo2" name="peakInfo2">
~~.~~ Hz</textarea></div>
<div class="commonText">f out<textarea id="peakInfo" name="peakInfo">
~~.~~ Hz</textarea></div>
</center>
</div>
<div class=container>
<label for = "secondSource"> Second source</label>
<audio id="audio-source" controls loop>
<source src="https://mdn.github.io/voice-change-o-matic/audio/concert-crowd.ogg" type="audio/ogg">
</audio>
</div>
</form>
</div>
<!-- Information box -->
<label for="toggle">❔</label>
<input type="checkbox" id="toggle">
<aside>
<h2>Information</h2>
<p>Voice-change-O-matic is built using:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia">getUserMedia</a>, which is currently supported in Firefox, Opera (desktop/mobile) and Chrome (desktop only.) Firefox requires no prefix; the others require <code>webkit</code> prefixes.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, which is currently supported in Firefox, Chrome, Safari (desktop/mobile) and Opera (desktop only). Firefox and Opera require no prefix; Chrome requires <code>webkit</code> prefixes.</li>
</ul>
<button id="install-btn">Install app</button>
</aside>
<!-- The following element pulls in the script for the default template functionality -->
<script src="scripts/install.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
</body>
</html>