forked from ehsan/chromium-audio-samples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
240 lines (193 loc) · 11 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
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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!--
Copyright 2009, Google Inc.
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style/codesite.css" rel="stylesheet" type="text/css" />
<title>Web Audio</title>
</head>
<body>
<h2>Web Audio Examples</h2>
<p>The Web Audio API introduces a variety of new audio features to the web platform. It can be used with the <code>canvas</code> 2D and
<code>WebGL</code> 3D graphics APIs for creating a new generation of games and interactive applications.
The API is capable of dynamically positioning/spatializing and mixing multiple sound sources in three-dimensional space.
It has a powerful modular routing system, supporting effects, a convolution engine for room simulation, multiple sends, submixes, etc.
Scheduled sound playback is provided for musical applications requiring a high degree of rhythmic precision. Realtime analysis / visualizer support and direct JavaScript processing is also supported.</p>
<p>These APIs are currently under development and are described in this <a href="http://chromium.googlecode.com/svn/trunk/samples/audio/specification/specification.html">specification</a> document.
</p>
<p>
Please direct any feedback to
the W3C audio mailing list - <b>[email protected]</b> or Chris Rogers - <b>[email protected]</b>.
</p>
<h2>Getting Started</h2>
<p>
<em>*** These samples require a browser which supports the Web Audio API. *** </em>
</p>
<br>
<img src="assets/chrome.png" width=64px/>
<h4> Mac OS X, Windows, and Linux </h4>
<p>
Builds are available in <a href='http://www.google.com/chrome'> stable releases</a> of Chrome.
</p>
<p>
More cutting-edge builds are available in the <a href='http://tools.google.com/dlpage/chromesxs'>Canary</a> builds. Please be aware that the
Canary builds are nightly builds which are not very well tested and can be unstable.
</p>
<br><br>
<img src="assets/safari.png" width=64px/>
<h4> Mac OS X</h4>
<p>
Web Audio is available in Apple Safari 6 in Mountain Lion, and in iOS 6.
</p>
<p>
More cutting-edge <a href="http://nightly.webkit.org/">nightly builds</a> are also available. For these builds,
before running, it might be necessary to enable by going into the "Terminal" application and typing:
</p>
<pre>
$ defaults write com.apple.Safari WebKitWebGLEnabled -bool YES
$ defaults write com.apple.Safari WebKitWebAudioEnabled -bool YES
$ defaults write com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2WebAudioEnabled -bool YES
$ defaults write com.apple.Safari com.apple.Safari.ContentPageGroupIdentifier.WebKit2WebGLEnabled -bool YES
</pre>
<h2>Samples</h2>
<br>
<table>
<tbody>
<tr>
<td style="width: 60px;">
<div style="display: block; text-align: left;"><a href="shiny-drum-machine.html" imageanchor="1"><img src="images/shiny-drum-machine.png" border="1"></a></div>
</td>
<td style="width: 300px;"><a href="shiny-drum-machine.html">
<b>Drum Machine</b></a>
is an interactive musical application illustrating the concept of "scheduled playback" where sounds can be sequenced very accurately in time.
A variety of special effects are available. Have fun with the demo presets, then experiment with your own creations. Demo courtesy of Ken Moore.
<br><br>
(old demo <a href='drum-machine.html'>here</a>)
</td>
</tr>
<tr>
<td style="width: 60px;">
<div style="display: block; text-align: left;"><a href="convolution-effects.html" imageanchor="1"><img src="images/convolution-effects.png" border="1"></a></div>
</td>
<td style="width: 300px;"><a href="convolution-effects.html"><b>Convolution Effects.</b></a> The powerful convolution engine is able to reproduce the sound of just about any real-world acoustic space but is also able to create some interesting special effects such as backward reverbs and strange filters.</td>
</tr>
<tr>
<td style="width: 60px;">
<div style="display: block; text-align: left;"><a href="wavetable-synth.html" imageanchor="1"><img src="images/synth.png" border="1"></a></div>
</td>
<td style="width: 300px;"><a href="wavetable-synth.html"><b>WaveTable Synth</b></a>
is a four oscillator mono/poly synth. Have fun tweaking the delays and other controls.</td>
</tr>
<tr>
<td style="width: 60px;">
<div style="display: block; text-align: left;"><a href="dj.html" imageanchor="1"><img src="images/dj.png" border="1"></a></div>
</td>
<td style="width: 300px;"><a href="dj.html"><b>Digital DJ</b></a> is a fun example where beat-matched loops may be loaded onto a left and right virtual turntable and controlled with a cross-fader, 2pole resonant filters, and an echo-delay effect.</td>
</tr>
<tr>
<td style="width: 60px;">
<div style="display: block; text-align: left;"><a href="granular.html" imageanchor="1"><img src="images/granular-effects.png" border="1"></a></div>
</td>
<td style="width: 300px;"><a href="granular.html"><b>Granular Effects</b></a> is another example of "scheduled playback" like Drum Machine. Here, the sound samples are small pieces (called "grains") taken from a larger sound buffer of a woman speaking. These small grains are then composited in various time sequences controllable by the sliders to achieve a crude but interesting time-stretching effect. Each of the grains may be changed in pitch, time, diffusion, and panning (positioning).</td>
</tr>
<tr>
<td style="width: 60px;">
<div style="display: block; text-align: left;"><a href="visualizer-gl.html" imageanchor="1"><img src="images/visualizer2-gl.png" border="1"></a></div>
</td>
<td style="width: 300px;"><a href="visualizer-gl.html"><b>Realtime Analyser.</b></a> is a visualizer using WebGL.
<br><br>
Also check out a version of this which <a href="visualizer-live.html">visualizes live audio input</a> from your microphone or other audio source. This one currently only
works in Mac Chrome Canary and requires enabling "Web Audio Input" in "about:flags":
</td>
</tr>
<tr>
<td style="width: 60px;">
<div style="display: block; text-align: left;"><a href="box2d-js/box2d-audio.html" imageanchor="1"><img src="images/box2d.png" border="1"></a></div>
</td>
<td style="width: 300px;"><a href="box2d-js/box2d-audio.html"><b>box2d</b></a> is an example of an interactive application with a real-time physics engine.
You can drop objects by clicking anywhere on the screen.
The collisions between the objects are accompanied by sound effects which take into account the positions of the objects,
as well as the force of the impacts.
<p>
Physics engine courtesy of <a href="http://www.box2d.org/">www.box2d.org</a>.
</p>
</td>
</tr>
<tr>
<td style="width: 60px;">
<div style="display: block; text-align: left;"><a href="simple.html" imageanchor="1"><img src="images/panning-reverb.png" border="1"></a></div>
</td>
<td style="width: 300px;"><a href="simple.html"><b>Panning/Reverb</b></a> This sample allows the user to move various sounds around in 3D space and explore different kinds of acoustic environments.</td>
</tr>
<tr>
<td style="width: 60px;">
<div style="display: block; text-align: left;"><a href="o3d-webgl-samples/pool.html" imageanchor="1"><img src="images/8-ball2.png" border="1"></a></div>
</td>
<td style="width: 300px;"><a href="o3d-webgl-samples/pool.html"><b>8-ball</b></a> A virtual pool game complete with sound effects.
It uses WebGL (originally ported from o3d).</td>
</tr>
<tr>
<td cellpadding="10" style="width: 60px;">
<div style="display: block; text-align: left;"><a href="javascript-processing.html"><img src="images/javascript-processing.png" border="1"></a></div>
</td>
<td style="width: 3000px;"><a href="javascript-processing.html"><b>JavaScript Processing</b></a> demonstrates how it's possible to do custom audio signal processing directly
in JavaScript. Here we're processing audio using a simple amplitude modulator effect, then visualizing the results. It's interesting to see how the side-bands move
as the modulation frequency is changed.<br>
</td>
</tr>
<tr>
<td cellpadding="10" style="width: 60px;">
<div style="display: block; text-align: left;"><a href="doppler.html"><img src="images/doppler.png" border="1"></a></div>
</td>
<td style="width: 3000px;"><a href="doppler.html"><b>Doppler Shift</b></a> is a demo where an object is animated around the listener and illustrates
both 3D spatialized positioning and doppler shifting, where the pitch of a sound increases as it moves toward the listener and decreases as it moves away.
It's possible to change the trajectory of the object left/right, front/back, and up/down, as well as to select some parameters such as speed, pitch,
and sound source.<br>
</td>
</tr>
</tbody>
</table>
<br><br><br>
<h2>More Demos</h2>
<a href="samples.html"><img src="images/ring-visualizer.png"></a>
<a href="samples.html"><img src="images/webgl-city.png"></a>
<a href="samples.html"><img src="images/pedalboard.png"></a>
<a href="samples.html"><img src="images/trigger-rally.png"></a>
<a href="samples.html"><img src="images/funklet.png"></a>
<a href="samples.html"><img src="images/filter-editor.png"></a>
<a href="samples.html"><img src="images/mixer.png"></a>
<a href="samples.html"><img src="images/xylophone.png"></a>
<a href="samples.html"><img src="images/plink.png"></a>
<a href="samples.html"><img src="images/tonecraft.png"></a>
<a href="samples.html"><img src="images/b.uild.in.png"></a>
<a href="samples.html"><img src="images/storiesinflight.png"></a>
<a href="samples.html"><img src="images/technocrat.png"></a>
<a href="samples.html"><img src="images/bohemian.png"></a>
</body>
</html>