/
sound.html
212 lines (183 loc) · 10.4 KB
/
sound.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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<html>
<head>
<title>Circles Sines and Signals - Sound</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="third_party/d3/d3.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Vollkorn:400italic,400' rel='stylesheet' type='text/css'>
<style>
@import url("fontello-b1d57784/css/fontello.css");
@import url("style.css");
</style>
<link rel="icon" type="" href="favicon.ico"></head>
<body>
<div class="title">
<table width="900">
<tr>
<td width="90%">
<div class="bigheader" id="titleinfo">
</div>
</td>
</tr>
<tr>
<td width="70%">
<br/>
<div id="menu" class="menu" style="margin-left: 45; ">
<table> <tr id="menurow"> </tr> </table>
</div>
<!-- -->
</td>
</tr>
</table>
</div>
<div class="littleheader"> SOUND
<div class="subheader" style="font-size: 14px"> DEFINITION AND WAVES </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
<i>Sound</i> is a pressure wave conveyed through some medium like air or water. When objects vibrate, they push and pull on the particles in their immediate vicinity. As an object vibrates outward into its surroundings, it pushes on (compresses) the neighboring air particles. When the object retreats away from the surrounding particles it creates a region of low pressure causing the particles to rush back towards the object. This “push and pull” causes a chain reaction of pushing and pulling which allows the vibration of the object to propagate outward through the air.
</p>
<p>
<i>Figure 1</i> depicts some vibrating body generating a sound wave. The large grey rectangle to the left of the figure is the vibrating body, and the small dots are meant to abstractly represent individual particles of air. If you pay close attention to a single particle, you’ll notice that it stays localized in a particular area. It will sway back and forth in response to the changes in pressure, but it does not travel far from the vibrating object. The vibrating object causes the particles around it to mimic its own pattern of vibration - to vibrate sympathetically.
</p>
<script>
var WAVE_FREQUENCY = 0.12;
var WAVE_AMPLITUDE = 0.50;
var TARGET_WAVE_FREQUENCY = 0.12;
var TARGET_WAVE_AMPLITUDE = 0.50;
var WAVE_INTERPOLATOR = d3.interpolateNumber(WAVE_FREQUENCY, TARGET_WAVE_FREQUENCY);
var WAVE_AMP_INTERPOLATOR = d3.interpolateNumber(WAVE_AMPLITUDE, TARGET_WAVE_AMPLITUDE);
var WAVE_INTERPOLATION = 1.0;
var WAVE_AMP_INTERPOLATION = 1.0;
function GET_WAVE_FREQUENCY() {
return WAVE_INTERPOLATOR(Math.min(WAVE_INTERPOLATION, 1.0));
}
function GET_WAVE_AMPLITUDE() {
return WAVE_AMP_INTERPOLATOR(Math.min(WAVE_AMP_INTERPOLATION, 1.0));
}
function updateSpeed(freq) {
WAVE_FREQUENCY = GET_WAVE_FREQUENCY();
TARGET_WAVE_FREQUENCY = freq / 100;
WAVE_INTERPOLATION = 0.0;
WAVE_INTERPOLATOR = d3.interpolateNumber(WAVE_FREQUENCY, TARGET_WAVE_FREQUENCY);
}
function updateAmount(amp) {
WAVE_AMPLITUDE = GET_WAVE_AMPLITUDE();
TARGET_WAVE_AMPLITUDE = amp / 100;
WAVE_AMP_INTERPOLATION = 0.0;
WAVE_AMP_INTERPOLATOR = d3.interpolateNumber(WAVE_AMPLITUDE, TARGET_WAVE_AMPLITUDE);
}
</script>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 1.</b> A Sound Wave. <br/> <sub> Very much slowed down and very much zoomed in </sub>
</td><br/><br/>
</tr>
<tr>
<td>
<svg id="physicalWave" class="svgWithText" width="695" height="205" style="margin-left: 55px; padding: 20px"></svg>
<script type="text/javascript" src="js/sound_wave.js"></script>
<div class="controls" style="padding-top: 10px;">
<table width="100%">
<tr>
<td style="text-align: center;" width="50%">
<label for=vibSpeedFader style="margin-left: auto; margin-right: auto">Vibration Speed</label><br/>
<input type=range min=4 max=20 value=12 id=vibSpeedFader step=1 oninput="updateSpeed(value);">
</td>
<td style="text-align: center;" width="50%">
<label for=vibAmountFader style="margin-left: auto; margin-right: auto">Vibration Intensity</label><br/>
<input type=range min=0 max=100 value=25 id=vibAmountFader step=1 oninput="updateAmount(value);">
</td>
</table>
</div>
</td>
</tr>
</table>
<br/>
<p>
The curve underneath the physical simulation plots the amount of compression or pressure between air particles. When the curve is above the horizontal axis, the particles are being squeezed together. When the curve is below, this indicates a region of low-pressure. In more terminologically rigorous circles, the squeezing is referred to as <i>compression</i>, and the spaciousness between particles is referred to as <i>rarefaction</i>. Note that particles in the rarefied sections of the wave are drawn a bit lighter to allow for better visualization of the wave motion.</p>
<p>
The speed of vibration is known as the <i>frequency</i>. Frequency is measured in <i>cycles per second</i>, also known as <i>Hertz</i>. We measure the frequency of the wave by counting the number of compression/rarefaction cycles that occur in one second. One full compression/rarefaction cycle looks like the curve shown in <i>Figure 1a</i>.
</p>
<table width="750">
<tr class="figureCaption">
<td width="100%">
<b>Figure 1a.</b> One Cycle of Our Pressure Wave<br/>
<sub>X-Axis: Time</sub><br/>
<sub>Y-Axis: Amplitude</sub><br/>
</td><br/><br/>
</tr>
<tr>
<td>
<svg id="sinecycle" class="svgWithText" width="170" height="100" style="padding: 5px; margin-left: 280px"></svg>
<script type="text/javascript" src="js/sine_cycle.js"></script>
</td>
</tr>
</table>
<p>
Returning to <i>Figure 1</i>, we should note that as the frequency of the wave increases, its <i>wavelength</i> decreases. A wave’s <i>length</i> is defined as the distance between adjacent peaks or valleys in the waveform, and this distance is always inversely proportional to the frequency of the wave. It’s also worth noting that the speed at which sound waves travel is constant, even if the intensity or frequency of the wave happens to vary. You can convince yourself of this fact by noting how long it takes a single peak or valley of the waveform to travel from the left side to the right side of <i>Figure 1</i>.<sup>1</sup>
</p>
</td>
<td class="figureExplanation" style="">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/>
<b>1.</b>
The speed at which sound waves travel depends upon the material through which they are being transmitted. At sea level, sound travels through air at a speed of 340 m/s. Sound waves travel much more quickly through a denser material like water, propagating at nearly 1500 m/s.<br/><br/>
</td>
</tr>
</table>
<div class="littleheader"> LISTEN
<div class="subheader" style="font-size: 14px"> SINE WAVES AND SOUND PERCEPTION </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
Smoothly oscillating objects like the object shown in <i>Figure 1</i> produce pressure waves which our auditory system interprets as <i>pure</i> tones. We refer to low frequency tones as bass, and high frequency tones as treble. People with exceptional hearing can hear tones from about 20 hertz to 20,000 hertz. As you get older, you lose your ability to hear tones at the high and low ends of this range. Play around with <i>Figure 2</i> to acquaint yourself with the sound of a sine wave.<sup>2</sup> You can click and drag on the visualization to change the frequency of the generated tone. You wont hear anything until you click the Play Sound button.
</p>
<br/>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 2.</b> Listen to a Sine Wave<br/>
<sub>Click and Drag to Change the Frequency</sub><br/>
<sub>X-Axis: Frequency in Hz</sub><br/>
<sub>Y-Axis: Magnitude</sub><br/>
</td>
</tr>
<tr>
<td>
<div id="animatedWrapper" class="animation" style="position: relative;">
<svg id="sineListen" class="svgWithText" width="750" height="250" style="cursor:pointer;"></svg>
<script type="text/javascript" src="js/sine_listen.js"></script>
</div>
</td>
</tr>
</table>
<p>
The frequency scale of <i>Figure 2</i> is not linear, but logarithmic. While we are able to hear sounds from 20 Hz to 20,000 Hz, most of the sounds that we are interested in - and the sounds that our ears are most sensitive to - exist in the range from about 20 Hz to 8,000 Hz. Human speech falls within 300 to 3,000 Hz. An 88 key piano produces notes with <i>fundamental</i> frequencies in the range of 22 to 4,000 hertz. A piano <i>does</i> produce sound above these frequencies in the form of overtones, and we’ll address this phenomenon in the next section.
</p>
</td>
<td class="figureExplanation" style="">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<b>2.</b>
You’ll probably need headphones to hear tones below 150Hz.
<br/><br/>You'll also need a browser which supports web-audio. If you're not hearing any sound, please file an issue on the <a href="http://www.github.com/jackschaedler/circles-sines-signals">github site.</a><br/><br/>
</td>
</tr>
</table>
<br/><br/><br/>
<div class="title" id="footer"></div><script type="text/javascript" src="menu.js"></script></body>
</html>