forked from surikov/webaudiofont
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathWebAudioFontExampleAll.html
107 lines (107 loc) · 5.61 KB
/
WebAudioFontExampleAll.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
<html>
<head>
</head>
<body>
<h1>WebAudioFont</h1>
<p>WebAudioFont is a set of resources and associated technology that uses sample-based synthesis to play musical instruments in browser.</p>
<h4>Parts of WebAudioFont</h4>
<ul>
<li>Library of sounds</li>
<li>Metadata that describe how to play sounds</li>
<li>WebAudioFontPlayer.js that uses metadata and sounds for playing instruments</li>
<li>Catalog of available sounds</li>
</ul>
<h4>Underlaying technology</h4>
<p>WebAudioFont uses Web Audio API to play instruments.</p>
<p>Synthesizer uses wavetables to play sound.</p>
<h2>Use cases</h2>
<ul>
<li>Virtual instruments: <a href="WebAudioFontExampleDrums.html">Drums</a>,
<a href="WebAudioFontExamplePiano.html">Piano</a>,
<a href="WebAudioFontExampleFlute.html">Pan Flute</a></li>
<li>Interactive music created on the fly: <a href="WebAudioFontExampleTune.html">Melody loop</a></li>
<li>Sound effects for non-music applications: <a href="WebAudioFontExampleFx.html">Car sound</a></li>
</ul>
<h2>How to use</h2>
<h4>Minimal HTML page</h4>
<pre>
<html>
<head>
<script src='WebAudioFontPlayer.js'></script>
<script src='webaudiofont/32.0.Accoustic_32Bsaccousticbs_461_460_45127.js'></script>
<script>
var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player=new WebAudioFontPlayer();
</script>
</head>
<body>
<p><a href='javascript:player.queueWaveTable(audioContext, audioContext.destination, _tone_Accoustic_32Bsaccousticbs_461_460_45127, 0, 12*4+7, 2);'>click!</a></p>
</body>
</html>
</pre>
<p>This code plays instrument <a href="webaudiofont/32.0.Accoustic_32Bsaccousticbs_461_460_45127.html">_tone_Accoustic_32Bsaccousticbs_461_460_45127</a>
from 32.0.Accoustic_32Bsaccousticbs_461_460_45127.js with pitch 55. See <a href="WebAudioFontExampleSimple.html">simple example</a>.</p>
<h4>How to use catalog of sounds:</h4>
<ul>
<li>open <a href="webaudiofont/index.html">index page</a></li>
<li>find instrument</li>
<li>copy name of file to include instrument data</li>
<li>copy name of variable to refer to instrument</li>
<li>add this info to a page</li>
</ul>
<h2>Sound file format</h2>
<p>Each file looks like this:</p>
<pre>
console.log('load _tone_Harp000087_461_460_45127');
var _tone_Harp000087_461_460_45127={
zones:[
{
midi:46
,originalPitch:5700
,keyRangeLow:0
,keyRangeHigh:62
,loopStart:3340
,loopEnd:3841
,coarseTune:0
,fineTune:0
,sampleRate:22050
,ahdsr:true
,sample:[0,-16,-17,97,124,-9, ...
}
,{
midi:46
,originalPitch:7001
,keyRangeLow:63
,keyRangeHigh:76
,...
</pre>
<p>It creates object and assigns it to a global variable.</p>
<p>Each instrument consists of one or more zones, each zone has own properties for wavetable. Files contains of array
with audio data. You can use instruments locally without <a href="https://www.google.ru/search?q=cors+problem">CORS problem</a>.</p>
<p>Some wavetables uses loops and <a href="https://www.google.ru/search?q=ahdsr">AHDSR volume</a>.</p>
<h2>Player</h2>
<p>WebAudioFontPlayer has function queueWaveTable (audioContext, target, preset, when, pitch, duration, continuous)</p>
<p>Parameters:</p>
<ul>
<li>audioContext - AudioContext</li>
<li>target - a node to connect, for example audioContext.destination</li>
<li>preset - variable with instrument preset</li>
<li>when - when to play, audioContext.currentTime or 0 to play now, audioContext.currentTime + 3 to play after 3 seconds</li>
<li>pitch - note pitch from 0 to 127, for example 2+12*4 to play D of fourth octave (use MIDI key for drums)</li>
<li>duration - note duration in seconds, for example 4 to play 4 seconds</li>
<li>continuous - true to ignore AHDSR</li>
</ul>
<p>queueWaveTable returns envelope object. You can use this object to cancel sound or access to AudioBufferSourceNode.</p>
<h2>All examples</h2>
<p><a href="WebAudioFontExampleSimple.html">WebAudioFontExampleSimple.html</a> - simple example.</p>
<p><a href="WebAudioFontExampleDrums.html">WebAudioFontExampleDrums.html</a> - virtual drums. This example shows using of drum instruments.</p>
<p><a href="WebAudioFontExamplePiano.html">WebAudioFontExamplePiano.html</a> - virtual piano. This example shows using of tone instrument.</p>
<p><a href="WebAudioFontExampleFlute.html">WebAudioFontExampleFlute.html</a> - virtual Pan flute. This example shows using of Envelope objects to start and stop a note playing.</p>
<p><a href="WebAudioFontExampleVoice.html">WebAudioFontExampleVoice.html</a> - two voice connected to different AudioNodes. This example shows how to create chain of AudioNodes and handle each instrument individually.</p>
<p><a href="WebAudioFontExampleFx.html">WebAudioFontExampleFx.html</a> - sound slides from one pitch to another one. This example shows how to access AudioBufferSourceNode of played note.</p>
<p><a href="WebAudioFontExampleTune.html">WebAudioFontExampleTune.html</a> - music loop. This example shows how to create and modify music in realtime.</p>
<p><a href="WebAudioFontExampleTouch.html">WebAudioFontExampleTouch.html</a> - multitouch beatpad. This example shows how to optimize application for mobile devices.</p>
<p><a href="WebAudioFontExampleSelector.html">WebAudioFontExampleSelector.html</a> - preset selector. This example shows how to load JS presets dynamically.</p>
</body>
</html>