-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (88 loc) · 4.16 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>~ s y n t h i a ~</title>
<script defer src="./index.js"></script>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<header id="header">
<h1>~ s y n t h i a ~</h1>
</header>
<p>
<div id="how-to-play">
<p>Welcome to synthia!</p>
<p>Use your QWERTY keyboard to make sounds.</p>
<p>An oscillator generates a sound wave.</p>
<p>The shape of the wave determines its texture: is it round, harsh, spiky?</p>
<p>Combine oscillators to create custom sounds.</p>
<p>Adjust the sliders to change the sounds.</p>
<p>Gain changes the loudness of an oscillator.</p>
<p>Attack changes the amount of time between pressing a key and reaching peak volume.</p>
<p>Release changes the amount of time the sound lingers after you stop pressing the key.</p>
</div>
<pre>
------------------------------------------------
black keys: [w][e] [t][y][u] [o][p]
white keys: [a][s][d][f][g][h][j][k][l][;][']
octave up/down: [z][x]
press escape to stop all sound
------------------------------------------------
</pre>
</p>
<div id="oscillator-container">
<div>
<em><div id="osc-name">Osc 1</div></em>
<label htmlFor="osc_type-select-1">wave:</label>
<select id="osc_type-select-1" name="osc_type-1">
<option value="sine">sine</option>
<option value="triangle">triangle</option>
<option value="sawtooth">sawtooth</option>
<option value="square">square</option>
</select>
<label htmlFor="gain-slider">gain:</label>
<input id="gain-slider-1" name="gain-1" type="range" min=0.001 max=1 step=0.01></input>
<label htmlFor="attack-slider-1">attack:</label>
<input id="attack-slider-1" name="attack-1" type="range" min=0.001 max=1 step=0.01></input>
<label htmlFor="release-slider-1">release:</label>
<input id="release-slider-1" name="release-1" type="range" min=0.001 max=1 step=0.01></input>
</div>
<br>
<div>
<em><div id="osc-name">Osc 2</div></em>
<label htmlFor="osc_type-select-2">wave:</label>
<select id="osc_type-select-2" name="osc_type-2">
<option value="sine">sine</option>
<option value="triangle">triangle</option>
<option value="sawtooth">sawtooth</option>
<option value="square">square</option>
</select>
<label htmlFor="gain-slider-2">gain:</label>
<input id="gain-slider-2" name="gain-2" type="range" min=0.0001 max=1 step=0.01></input>
<label htmlFor="attack-slider-2">attack:</label>
<input id="attack-slider-2" name="attack-2" type="range" min=0.001 max=1 step=0.01></input>
<label htmlFor="release-slider-2">release:</label>
<input id="release-slider-2" name="release-2" type="range" min=0.001 max=1 step=0.01></input>
</div>
<br>
<div>
<em><div id="osc-name">Osc 3</div></em>
<label htmlFor="osc_type-select-3">wave:</label>
<select id="osc_type-select-3" name="osc_type-3">
<option value="sine">sine</option>
<option value="triangle">triangle</option>
<option value="sawtooth">sawtooth</option>
<option value="square">square</option>
</select>
<label htmlFor="gain-slider-3">gain:</label>
<input id="gain-slider-3" name="gain-3" type="range" min=0.001 max=1 step=0.01></input>
<label htmlFor="attack-slider-3">attack:</label>
<input id="attack-slider-3" name="attack-3" type="range" min=0.001 max=1 step=0.01></input>
<label htmlFor="release-slider-3">release:</label>
<input id="release-slider-3" name="release-3" type="range" min=0.001 max=1 step=0.01></input>
</div>
</div>
</body>
</html>