-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
158 lines (119 loc) · 5.66 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Scratch Tone Synth Extension</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header-container">
<header>
<h1>Scratch Tone Synth Extension</h1>
</header>
</div>
<div id="content-container">
<h1>Contents</h1>
<ul id="nav">
<li><a href="#intro">Introduction</a></li>
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#blocks">Scratch Blocks</a></li>
<li><a href="#examples">Example Projects</a></li>
</ul>
<a name="intro"></a><h1>Introduction</h1>
<p>This <a href="https://scratch.mit.edu">Scratch</a> extension provides you with a set of blocks you can use to generate your own sounds.</p>
<p>Experiment with a sound synthesizer with blocks that control frequency and waveform, and effects like echo, pan, glide, and wah. You can use it to code your own funky electronic music or make weird new sound effects.</p>
<p><a target="_new" href="http://tonejs.org">Tone.js</a> and the <a target="_new" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> are used to power this extension.</p>
<img class="thumbnail" src="res/space-gobo.jpg" />
<br />
<i>Gobo in Space available in the <a href="#examples">Example Projects</a></i>
<a name="getting-started"></a><h1>Getting Started</h1>
<p>The Web Audio API is not supported by Internet Explorer at this time.</p>
<p>Google Chrome, Firefox, and Safari web browsers should all work with this extension.</p>
<p><a target="_new" href="http://scratchx.org/?url=http://ericrosenbaum.github.io/tone-synth-extension/tone-synth.js">Launch the synth extension on ScratchX</a>.</p>
<a name="blocks"></a><h1>Scratch Blocks</h1>
<div class="block">
<img height="40" src="res/synth_on_for.png" />
<p>Turn the tone on for a specified number of seconds.</p>
</div>
<hr />
<div class="block">
<img height="40" src="res/synth_on_for_wait.png" />
<p>Turn the tone on for a specified number of seconds. Waits until the tone is complete before going on to the next block.</p>
</div>
<hr />
<div class="block">
<img height="40" src="res/synth_on.png" />
<p>Turn the tone on.</p>
</div>
<hr />
<div class="block">
<img height="40" src="res/synth_off.png" />
<p>Turn the tone off.</p>
</div>
<hr />
<div class="block">
<img height="40" src="res/synth_set_note.png" />
<p>Set the tone to either a note (MIDI Key) or frequency (Hz).</p>
<p><a target="_new" href="http://www.richardbrice.net/midi_notes.htm">MIDI notes and frequency table</a></p>
</div>
<hr />
<div class="block">
<img height="40" src="res/synth_change_note.png" />
<p>Change note (MIDI Key) or frequency (Hz) by a specified number.</p>
</div>
<hr />
<div class="block">
<img height="32" src="res/synth_type.png" />
<p>Report the synthesizer's current note (MIDI Key) or frequency (Hz).</p>
</div>
<hr />
<div class="block">
<img height="40" src="res/synth_set_effect.png" />
<p>Set an effect to a value between 0 and 100%:
<ul>
<li><b>echo</b>: Repeat sounds with a delay (0% is no echoes, 100% is loud echoes)</li>
<li><b>wah</b>: Add a "wah" effect to the beginning of each new sound (0% is off, 100% is the strongest effect)</a>
<li><b>pan left/right</b>: Shift stereo sound from the left speaker (0%) to the right speaker (100%)</li>
<li><b>glide</b>: Slide smoothly between notes (0% is off, 100% is the slowest slide)</li>
<li><b>volume</b>: Set loudness of the synth (0% is off, 100% is full volume)</li>
</ul>
</p>
</div>
<hr />
<div class="block">
<img height="40" src="res/synth_change_effect.png" />
<p>Change synth effect by a value between 0 and 100%.</p>
<hr />
<div class="block">
<img height="40" src="res/synth_clear_effect.png" />
<p>Clear all synth effects.</p>
</div>
<hr />
<div class="block">
<img height="40" src="res/synth_echo_delay.png" />
<p>Set the delay time in seconds for the echo effect (you have to also use the "set synth effect echo" block to turn it on).</p>
</div>
<hr />
<div class="block">
<img height="40" src="res/synth_oscillator_type.png" />
<p>Change the oscillator waveform between sine, triangle, square, sawtooth, and pwm. </p>
<p><a target="_new" href="https://en.wikibooks.org/wiki/Sound_Synthesis_Theory/Oscillators_and_Wavetables">Information on oscillator waveforms</a></p>
</div>
<a name="examples"></a><h1>Example Projects</h1>
<dl>
<br />
<dt><a target="_new" href="http://scratchx.org/?url=http://ericrosenbaum.github.io/tone-synth-extension/examples/Gobo%20In%20Space.sbx#scratch">Gobo in Space</a></dt>
<dd>Drag your mouse to make Gobo sing spacey sounds.</dd>
<br />
<dt><a target="_new" href="http://scratchx.org/?url=http://ericrosenbaum.github.io/tone-synth-extension/examples/Synth%20Racer.sbx">Synth Racer</a></dt>
<dd>Drive a ball with the arrow keys to make synthesized engine sounds. The engine sound increases in frequency with the ball's velocity. Drive over the red and blue circles for a bounce or a boost.</dd>
<br />
<dt><a target="_new" href="http://scratchx.org/?url=http://ericrosenbaum.github.io/tone-synth-extension/examples/Bouncing%20Synth%20Ball.sbx">Bouncing Synth Ball</a></dt>
<dd>When the ball crosses the red or blue lines the oscillator turns on and changes frequencies.</dd>
<br />
<dt><a target="_new" href="http://scratchx.org/?url=http://ericrosenbaum.github.io/tone-synth-extension/examples/Synth Sounds.sbx">Synth Test</a></dt>
<dd>Demonstrates the synth extension with sound effects triggered by arrow keys and the mouse.</dd>
</dl>
</div>
<br />
</body>
</html>