WebAudioFont
WebAudioFont is a set of resources and associated technology that uses sample-based synthesis to play musical instruments in the browser.
You can choose from thousands of instrument, see
Catalog.
$3
see
LICENSE.md. Contact me if you need different license.
$3
Hire me if you need advanced help (sss1024@gmail.com) - https://www.linkedin.com/in/sergeysurikov/
$3
API
Wiki
$3
Issues
$3
- simple example -
code -
open
- virtual drums -
code -
open
- virtual piano -
code -
open
- endless flute -
code -
open
- two voices -
code -
open
- sound fx -
code -
open
- realtime music -
code -
open
- dynamic loading -
open
- mixer, equalizer and reverberation -
open
- custom AHDSR envelope -
open
- strum chord -
open
- MIDI keyboard -
open
- MIDI player -
open
$3
#### Pianoroll editor
Launch Web version
Install Android version

#### Fretboard for chords
Launch
#### Auto accompaniment
Launch
Install Android version

#### 3D music sequencer
Launch

#### Use cases
- Virtual instruments
- Interactive music generated on the fly
- Sound effects for non-music applications
#### Content
-
How to use
-
Hello, world
-
Dynamic loading
-
Effects and mixer
-
Custom samples
-
Installation
- for
ReactJS
- for
TypeScript
-
Reference
-
Parts of WebAudioFont
-
Catalog of instruments
-
Player
-
How to get help
How to use
Add a link to WebAudioFontPlayer.js and the instrument file. Invoke queueWaveTable.
$3
Minimal HTML page
``
html
Hello, world!
`
See live example.
Use queueWaveTable to play single note. Use queueChord, queueSnap, queueStrumDown, queueStrumUp to play chords. See live example for strumming.
Use time for notes to define sequence. See live example of sequencer.
$3
Use the startLoad and waitLoad functions.
`
javascript
var instr=null;
var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player=new WebAudioFontPlayer();
function changeInstrument(path,name){
player.loader.startLoad(audioContext, path, name);
player.loader.waitLoad(function () {
instr=window[name];
});
}
changeInstrument('https://surikov.github.io/webaudiofontdata/sound/0290_Aspirin_sf2_file.js','_tone_0290_Aspirin_sf2_file');
`
All loaded instruments are cached in memory.
See live example
$3
Use WebAudioFontChannel to create a chain of 10-band equalizers.
Use WebAudioFontReverberator to add echo.
See live example
$3
See tutorial
Installation
WebAudioFont doesn't require installation. It hosts all code and instruments at GitHub Pages.
$3
#### JavaScript
`
javascript
var webaudiofont = require('webaudiofont');
var player = new WebAudioFontPlayer();
`
#### package.json
`
...
"devDependencies": {
"webaudiofont":"^2.5.0"
...
``
Parts of WebAudioFont
WebAudioFont uses
Web Audio API to play instruments.
Synthesizer uses
wavetables to play sound.
Instruments came from free soundfonts:
-
GeneralUserGS.sf2 license
-
FluidR3.sf2 license
#### How to use catalog of sounds:
- open
index page
- find an instrument
- copy the name of the file to include the instrument data
- copy the name of the variable to refer to the instrument
- add this info to a page
Use drumInfo and instrumentInfo in realtime. See
live example.
$3
WebAudioFontPlayer has the function queueWaveTable(audioContext, target, preset, when, pitch, duration, volume, slides)
Parameters:
- audioContext - AudioContext
- target - a node to connect to, for example audioContext.destination
- preset - variable with the instrument preset
- when - when to play, audioContext.currentTime or 0 to play now, audioContext.currentTime + 3 to play after 3 seconds
- pitch - note pitch from 0 to 127, for example 2+12*4 to play D of fourth octave (use MIDI key for drums)
- duration - note duration in seconds, for example 4 to play 4 seconds
- volume - 0.0 <=1.0 volume (0 is 'no value', 'no value' is 1)
- slides - array of pitch bends
The function queueWaveTable returns an envelope object. You can use this object to cancel a sound or to access AudioBufferSourceNode.
#### Strumming
Use queueChord, queueStrumUp, queueStrumDown, queueSnap for chords. See
live example.
How to get help
Feel free to ask for any kind of help at
project issues.
ReactJS
See
ReactJS implementation.
TypeScript
See
TypeScript implementation.
$3
The catalog consists of a full set of MIDI standards. Each instrument has 5-10 sound variations from different soundfonts.
- Piano
- Acoustic Grand Piano:
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10
- Bright Acoustic Piano:
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21
- Electric Grand Piano:
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31
- Honky-tonk Piano:
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42
- Electric Piano 1:
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57
- Electric Piano 2:
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69
- Harpsichord:
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80
- Clavinet:
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88
- Chromatic Percussion
- Celesta:
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98
- Glockenspiel:
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106
- Music Box:
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115
- Vibraphone:
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123
- Marimba:
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132
- Xylophone:
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140
- Tubular Bells:
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151
- Dulcimer:
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159
- Organ
- Drawbar Organ:
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169
- Percussive Organ:
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179
- Rock Organ:
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189
- Church Organ:
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199
- Reed Organ:
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210
- Accordion:
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222
- Harmonica:
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230
- Tango Accordion:
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243
- Guitar
- Acoustic Guitar (nylon):
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255
- Acoustic Guitar (steel):
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273
- Electric Guitar (jazz):
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285
- Electric Guitar (clean):
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298
- Electric Guitar (muted):
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314
- Overdriven Guitar:
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332
- Distortion Guitar:
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 |
353
- Guitar Harmonics:
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 |
363 |
364 |
365
- Bass
- Acoustic Bass:
366 |
367 |
368 |
369 |
370 |
371 |
372 |
373 |
374
- Electric Bass (finger):
375 |
376 |
377 |
378 |
379 |
380 |
381 |
382 |
383
- Electric Bass (pick):
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392
- Fretless Bass:
393 |
394 |
395 |
396 |
397 |
398 |
399 |
400
- Slap Bass 1:
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408
- Slap Bass 2:
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417
- Synth Bass 1:
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433
- Synth Bass 2:
434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |
444 |
445 |
446
- Strings
- Violin:
447 |
448 |
449 |
450 |
451 |
452 |
453 |
454 |
455 |
456 |
457
- Viola:
458 |
459 |
460 |
461 |
462 |
463 |
464 |
465
- Cello:
466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 |
474
- Contrabass:
475 |
476 |
477 |
478 |
479 |
480 |
481 |
482
- Tremolo Strings:
483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491
- Pizzicato Strings:
492 |
493 |
494 |
495 |
496 |
497 |
498 |
499
- Orchestral Harp:
500 |
501 |
502 |
503 |
504 |
505 |
506 |
507
- Timpani:
508 |
509 |
510 |
511 |
512 |
513 |
514 |
515 |
516
- Ensemble
- String Ensemble 1:
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 |
539 |
540 |
541 |
542 |
543
- String Ensemble 2:
544 |
545 |
546 |
547 |
548 |
549 |
550 |
551 |
552
- Synth Strings 1:
553 |
554 |
555 |
556 |
557 |
558 |
559 |
560 |
561 |
562 |
563 |
564 |
565 |
566
- Synth Strings 2:
567 |
568 |
569 |
570 |
571 |
572 |
573 |
574 |
575
- Choir