webaudiofont

<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>webaudiofont</title><meta name="description" content="Documentation for webaudiofont"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">webaudiofont</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility">All<ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><h1> webaudiofont</h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><div class="tsd-panel tsd-typography"> <a href="#webaudiofont" id="webaudiofont" style="color: inherit; text-decoration: none;"> <h1>WebAudioFont</h1> </a> 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 <a href="#catalog-of-instruments">Catalog</a>. <a href="#license" id="license" style="color: inherit; text-decoration: none;"> <h3>License</h3> </a> see <a href="https://github.com/surikov/webaudiofont/blob/master/LICENSE.md">LICENSE.md</a>. Contact me if you need different license. <a href="#help" id="help" style="color: inherit; text-decoration: none;"> <h3>Help</h3> </a> Hire me if you need advanced help (<a href="mailto:sss1024@gmail.com">sss1024@gmail.com</a>). <a href="#docs" id="docs" style="color: inherit; text-decoration: none;"> <h3>Docs</h3> </a> <a href="https://surikov.github.io/webaudiofont/npm/src/docs/modules.html">API</a> <a href="https://github.com/surikov/webaudiofont/wiki">Wiki</a> <a href="#bug-reports" id="bug-reports" style="color: inherit; text-decoration: none;"> <h3>Bug Reports</h3> </a> <a href="https://github.com/surikov/webaudiofont/issues?q=">Issues</a> <a href="#code-examples" id="code-examples" style="color: inherit; text-decoration: none;"> <h3>Code examples</h3> </a> <ul> <li>simple example - <a href="http://jsbin.com/lamidog/1/edit?html,output">code</a> - <a href="https://surikov.github.io/webaudiofont/examples/simple.html">open</a></li> <li>virtual drums - <a href="http://jsbin.com/wajopuy/1/edit?html,output">code</a> - <a href="https://surikov.github.io/webaudiofont/examples/drums.html">open</a></li> <li>virtual piano - <a href="http://jsbin.com/binelu/1/edit?html,output">code</a> - <a href="https://surikov.github.io/webaudiofont/examples/piano.html">open</a></li> <li>endless flute - <a href="http://jsbin.com/midadem/1/edit?html,output">code</a> - <a href="https://surikov.github.io/webaudiofont/examples/flute.html">open</a></li> <li>two voices - <a href="http://jsbin.com/vujewem/1/edit?html,output">code</a> - <a href="https://surikov.github.io/webaudiofont/examples/voices.html">open</a></li> <li>sound fx - <a href="http://jsbin.com/tipine/1/edit?html,output">code</a> - <a href="https://surikov.github.io/webaudiofont/examples/fx.html">open</a></li> <li>realtime music - <a href="https://jsbin.com/wuxilab/2/edit?html,output">code</a> - <a href="https://surikov.github.io/webaudiofont/examples/realtime.html">open</a></li> <li>dynamic loading - <a href="https://surikov.github.io/webaudiofont/examples/dynamic.html">open</a></li> <li>mixer, equalizer and reverberation - <a href="https://surikov.github.io/webaudiofont/examples/mixer.html">open</a></li> <li>custom AHDSR envelope - <a href="https://surikov.github.io/webaudiofont/examples/ahdsr.html">open</a></li> <li>strum chord - <a href="https://surikov.github.io/webaudiofont/examples/strum.html">open</a></li> <li>MIDI keyboard - <a href="https://surikov.github.io/webaudiofont/examples/midikey.html">open</a></li> <li>MIDI player - <a href="https://surikov.github.io/webaudiofont/examples/midiplayer.html">open</a></li> </ul> <a href="#example-applications" id="example-applications" style="color: inherit; text-decoration: none;"> <h3>Example applications</h3> </a> <a href="#pianoroll-editor" id="pianoroll-editor" style="color: inherit; text-decoration: none;"> <h4>Pianoroll editor</h4> </a> <a href="https://surikov.github.io/RiffShareAndroid/app/src/main/assets/load.html?riff=78-35525525-55955559-0d0d0c0704100f0e070c-0009010302090303040905030609070327c040104110421043104410451046104708673080608166826683668466856686668706a010a111a211a311a411a511a611a701e001-005030c40006102440006102740006102b40002031840000030c40035030c40032031b40033030c40065030c40062081f40060030c40095030c40093030c400c5040c400c0040c400e2041f40105030540106102440106102740106102940100030540122061b40135030540133030540165030540160030540182021b401950305401930305401a2061d401c50405401c0040540205030840206102440206102740206102b40202031840200030840235030840232031b40233030840265030840262081f402600308402950308402930308402c50408402c00408402e2041f40305030a40306102440306102740306102c40300030a40322061b40335030a40333030a40365030a40360030a40382021b40395030a40393030a403a2061d403c5040a403c0040a40">Launch Web version</a> <a href="https://play.google.com/store/apps/details?id=surikov.riffshareii">Install Android version</a> <a href="https://www.youtube.com/watch?v=vJc11SsyfQ4"><img src="https://img.youtube.com/vi/vJc11SsyfQ4/0.jpg" alt="Screenplay"></a> <a href="#fretboard-for-chords" id="fretboard-for-chords" style="color: inherit; text-decoration: none;"> <h4>Fretboard for chords</h4> </a> <a href="https://surikov.github.io/RiffShareAndroid/app/src/main/assets/fretload.html?riff=1-120-035110e4020c4120a411064110741108411094110c3320c2320e3020e202034310333106331062310733107231083310823109331092310a2310a3311354113461133611644116361162611744118441194411c4421e4421c3621c2621e2621e3621736117261183611826119361192610051300433003330433204432045121054310463103631454214462143621a2611a3611a441-0001002222100010000100222210000">Launch</a> <a href="#auto-accompaniment" id="auto-accompaniment" style="color: inherit; text-decoration: none;"> <h4>Auto accompaniment</h4> </a> <a href="https://zvoog.app/RockDice/main.html">Launch</a> <a href="https://play.google.com/store/apps/details?id=rockdice.chord.progression">Install Android version</a> <a href="https://www.youtube.com/watch?v=6nxSduiO1RA"><img src="https://img.youtube.com/vi/6nxSduiO1RA/0.jpg" alt="Screenplay"></a> <a href="#3d-music-sequencer" id="3d-music-sequencer" style="color: inherit; text-decoration: none;"> <h4>3D music sequencer</h4> </a> <a href="https://surikov.github.io/riffshare/parse.html?riff=8c-0000243a-a1657060-0e0d080c0d0e0706050f-00110111021103110411051106110711081109110a110b110c110d110e110f1110111111121113111411151116111711181119111a111b111c111d111e111f113099319f328f339e348f359e369f379e3899399f3a8f3b9e3c8f3d9e3e9f3f9e4099419942994399449f459f469f4799489949994a994b994c9f4d9f4e9f4f995099519f5299539f5499559f5699571f5899599f5a995b9f5c995d9f5e995f1f80118111821183118411851186118711881189118a118b118c118d118e118f1190119111921193119411951196119711981199119a119b119c119d119e119f11c011c111c211c311c411c511c611c711c811c911ca11cb11cc11cd11ce11cf11d011d111d211d311d411d511d611d711d811d911da11db11dc11dd11de11df11-004023040005020040007030040024022b40027020c40037020740044022740045040740047030040054022b40067020c400740224400770207400850200400870300400a7020c400b70207400c40230400c50407400c70200400d70200400e4022e400e70207400f7020c40104023040105030040107030040124022b40127020c40137020740144022740145040740147030040154022b40167020c401740224401770207401850300401870300401a7020c401b70207401c40230401c50407401c70200401d70200401e40232401e70207401f7020c40204023340205030040207030040224023240227020c40234023340237020740245040040247020040254023340257020040267020740274023040277020c40284023240285030a40287030a402a40230402a7020a402b40232402b70205402c5030a402c7020a402d40232402d7020a402e70205402f4022e402f7020a40304023040305030840307030840324022e40327020840334023040337020340345040840347020840354023040357020840367020340374022c403770208403840230403850400403870300403a7020c403b70205403c40230403c50407403c70200403d70200403e4022e403e70205403f7020c40404023040405030040407030040424022b40427020c40437020740444022740445040740447030040454022b40467020c404740224404770207404850400404870300404a7020c404b70207404c40230404c50407404c70200404d70200404e4022e404e70207404f7020c40504023040505040040507030040524022b40527020c40537020740544022740545040740547030040554022b40567020c405740224405770207405850300405870300405a7020c405b70207405c40230405c50407405c70200405d70200405e40232405e70207405f7020c40604023340605030040607030040624023240627020c40634023340637020740645040040647020040654023340657020040667020740674023040677020c40684023240685030a40687030a406a40230406a7020a406b40232406b70205406c5040a406c7020a406d40232406d7020a406e70205406f4022e406f7020a40704023040705030840707030840724022e407270208407340230407370203407450408407470208407540230407570208407670203407740232407770208407840233407850300407870303407a7020f407b7020a407c40237407c50300407c70203407d70203407e40235407e7020a407f7020f408040237408050303408060f2240807030340824023340827020f40837020a40844022e40845030a40847030340854023340867020f40874022b40877020a408850303408870303408a7020f408b7020a408c40237408c5030a408c70203408d70203408e40235408e60321408e7020a408f7020f40904023740905030340906052240907030340924023340927020f40937020a40944022e40945030a40946091f40947030340954023340967020f40974022b40977020a409850303409870303409a7020f409b7020a409c40237409c5040a409c60322409c70203409d70203409e40239409e60324409e7020a409f7020f40a04023a40a05030740a06072640a07030740a24023940a27021340a34023a40a37020e40a45040740a47020740a54023a40a57020740a66032240a67020e40a74023740a77021340a84023940a85040540a86072440a87030540aa4023740aa7021140ab4023940ab7020c40ac5040540ac7020540ad4023940ad7020540ae6032140ae7020c40af4023540af7021140b04023740b05030340b06112240b07030340b24023540b27020f40b34023740b37020a40b45030a40b47020340b54023740b57020340b67020a40b74023340b77020f40b84023740b85030340b87030340ba7020f40bb7020a40bc4023740bc5030a40bc7020340bd7020340be4023540be7020a40bf7020f40c04023740c05030340c060f2240c07030340c24023340c27020f40c37020a40c44022e40c45040a40c47030340c54023340c67020f40c74022b40c77020a40c85030340c87030340ca7020f40cb7020a40cc4023740cc5030a40cc7020340cd7020340ce4023540ce6032140ce7020a40cf7020f40d04023740d05030340d06052240d07030340d24023340d27020f40d37020a40d44022e40d45030a40d46091f40d47030340d54023340d67020f40d74022b40d77020a40d85030340d87030340da7020f40db7020a40dc4023740dc5030a40dc6032240dc7020340dd7020340de4023940de6032440de7020a40df7020f40e04023a40e05030740e06072640e07030740e24023940e27021340e34023a40e37020e40e45030740e47020740e54023a40e57020740e66032240e67020e40e74023740e77021340e84023940e85030540e86072440e87030540ea4023740ea7021140eb4023940eb7020c40ec5030540ec7020540ed4023940ed7020540ee6032140ee7020c40ef4023540ef7021140f04023740f05040340f06082240f07030340f24023540f27020f40f34023240f37020a40f45030340f47020340f54023240f57020340f64023540f66031f40f67020a40f77020f40f84023740f85030040f86092240f87030040fa7020c40fb7020740fc4023040fc5040040fc7020040fd7020040fe4022e40fe7020740ff7020c40">Launch</a> <a href="https://www.youtube.com/watch?v=WU0C0ieXZhg"><img src="https://img.youtube.com/vi/WU0C0ieXZhg/0.jpg" alt="Screenplay"></a> <a href="#use-cases" id="use-cases" style="color: inherit; text-decoration: none;"> <h4>Use cases</h4> </a> <ul> <li>Virtual instruments</li> <li>Interactive music generated on the fly</li> <li>Sound effects for non-music applications</li> </ul> <a href="#content" id="content" style="color: inherit; text-decoration: none;"> <h4>Content</h4> </a> <ul> <li><a href="#how-to-use">How to use</a><ul> <li><a href="#hello-world">Hello, world</a></li> <li><a href="#dynamic-loading">Dynamic loading</a></li> <li><a href="#effects-and-mixer">Effects and mixer</a></li> <li><a href="#custom-samples">Custom samples</a></li> </ul> </li> <li><a href="#installation">Installation</a><ul> <li>for <a href="#reactjs">ReactJS</a></li> <li>for <a href="#typescript">TypeScript</a></li> </ul> </li> <li><a href="https://github.com/surikov/webaudiofont/wiki">Reference</a></li> <li><a href="#parts-of-webaudiofont">Parts of WebAudioFont</a><ul> <li><a href="#catalog-of-instruments">Catalog of instruments</a></li> <li><a href="#player">Player</a></li> </ul> </li> <li><a href="#how-to-get-help">How to get help</a></li> </ul> <a href="#how-to-use" id="how-to-use" style="color: inherit; text-decoration: none;"> <h2>How to use</h2> </a> Add a link to WebAudioFontPlayer.js and the instrument file. Invoke queueWaveTable. <a href="#hello-world" id="hello-world" style="color: inherit; text-decoration: none;"> <h3>Hello, world</h3> </a> Minimal HTML page <pre><code class="language-html"><html> <head> <script src='https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js'></script> <script src='https://surikov.github.io/webaudiofontdata/sound/0250_SoundBlasterOld_sf2.js'></script> <script> var AudioContextFunc = window.AudioContext || window.webkitAudioContext; var audioContext = new AudioContextFunc(); var player=new WebAudioFontPlayer(); player.loader.decodeAfterLoading(audioContext, '_tone_0250_SoundBlasterOld_sf2'); function play(){ player.queueWaveTable(audioContext, audioContext.destination , _tone_0250_SoundBlasterOld_sf2, 0, 12*4+7, 2); return false; } </script> </head> <body> <p><a href='javascript:play();'>Hello, world!</a></p> </body> </html> </code></pre> See <a href="https://surikov.github.io/webaudiofont/examples/simple.html">live example</a>. Use queueWaveTable to play single note. Use queueChord, queueSnap, queueStrumDown, queueStrumUp to play chords. See <a href="https://surikov.github.io/webaudiofont/examples/strum.html">live example for strumming</a>. Use time for notes to define sequence. See <a href="https://surikov.github.io/webaudiofont/examples/realtime.html">live example of sequencer</a>. <a href="#dynamic-loading" id="dynamic-loading" style="color: inherit; text-decoration: none;"> <h3>Dynamic loading</h3> </a> Use the startLoad and waitLoad functions. <pre><code class="language-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'); </code></pre> All loaded instruments are cached in memory. See <a href="https://surikov.github.io/webaudiofont/examples/dynamic.html">live example</a> <a href="#effects-and-mixer" id="effects-and-mixer" style="color: inherit; text-decoration: none;"> <h3>Effects and mixer</h3> </a> Use WebAudioFontChannel to create a chain of 10-band equalizers. Use WebAudioFontReverberator to add echo. See <a href="https://surikov.github.io/webaudiofont/examples/mixer.html">live example</a> <a href="#custom-samples" id="custom-samples" style="color: inherit; text-decoration: none;"> <h3>Custom samples</h3> </a> See <a href="https://surikov.github.io/webaudiofont/examples/customsample.html">tutorial</a> <a href="#installation" id="installation" style="color: inherit; text-decoration: none;"> <h2>Installation</h2> </a> WebAudioFont doesn't require installation. It hosts all code and instruments at <a href="https://pages.github.com/">GitHub Pages</a>. <a href="#minimal-npm-code-if-you-need-this" id="minimal-npm-code-if-you-need-this" style="color: inherit; text-decoration: none;"> <h3>Minimal NPM code (if you need this)</h3> </a> <a href="#javascript" id="javascript" style="color: inherit; text-decoration: none;"> <h4>JavaScript</h4> </a> <pre><code class="language-javascript">var webaudiofont = require('webaudiofont'); var player = new WebAudioFontPlayer(); </code></pre> <a href="#packagejson" id="packagejson" style="color: inherit; text-decoration: none;"> <h4>package.json</h4> </a> <pre><code>... "devDependencies": { "webaudiofont":"^2.5.0" ... </code></pre> <a href="#parts-of-webaudiofont" id="parts-of-webaudiofont" style="color: inherit; text-decoration: none;"> <h2>Parts of WebAudioFont</h2> </a> WebAudioFont uses <a href="https://www.google.ru/search?q=web+audio+api">Web Audio API</a> to play instruments. Synthesizer uses <a href="https://www.google.ru/search?q=wavetable+synthesis">wavetables</a> to play sound. Instruments came from free soundfonts: <ul> <li><a href="http://www.schristiancollins.com/generaluser.php">GeneralUserGS.sf2 license</a></li> <li><a href="https://github.com/musescore/MuseScore/blob/master/share/sound/FluidR3Mono_License.md">FluidR3.sf2 license</a></li> </ul> <a href="#how-to-use-catalog-of-sounds" id="how-to-use-catalog-of-sounds" style="color: inherit; text-decoration: none;"> <h4>How to use catalog of sounds:</h4> </a> <ul> <li>open <a href="https://surikov.github.io/webaudiofontdata/sound/">index page</a></li> <li>find an instrument</li> <li>copy the name of the file to include the instrument data</li> <li>copy the name of the variable to refer to the instrument</li> <li>add this info to a page</li> </ul> Use drumInfo and instrumentInfo in realtime. See <a href="https://surikov.github.io/webaudiofont/examples/dynamic.html">live example</a>. <a href="#player" id="player" style="color: inherit; text-decoration: none;"> <h3>Player</h3> </a> WebAudioFontPlayer has the function queueWaveTable(audioContext, target, preset, when, pitch, duration, volume, slides) Parameters: <ul> <li>audioContext - AudioContext</li> <li>target - a node to connect to, for example audioContext.destination</li> <li>preset - variable with the 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>volume - 0.0 <=1.0 volume (0 is 'no value', 'no value' is 1)</li> <li>slides - array of pitch bends</li> </ul> The function queueWaveTable returns an envelope object. You can use this object to cancel a sound or to access AudioBufferSourceNode. <a href="#strumming" id="strumming" style="color: inherit; text-decoration: none;"> <h4>Strumming</h4> </a> Use queueChord, queueStrumUp, queueStrumDown, queueSnap for chords. See <a href="https://surikov.github.io/webaudiofont/examples/strum.html">live example</a>. <a href="#how-to-get-help" id="how-to-get-help" style="color: inherit; text-decoration: none;"> <h2>How to get help</h2> </a> Feel free to ask for any kind of help at <a href="https://github.com/surikov/webaudiofont/issues">project issues</a>. <a href="#reactjs" id="reactjs" style="color: inherit; text-decoration: none;"> <h2>ReactJS</h2> </a> See <a href="https://www.npmjs.com/package/midi-sounds-react">ReactJS implementation</a>. <a href="#typescript" id="typescript" style="color: inherit; text-decoration: none;"> <h2>TypeScript</h2> </a> See <a href="https://github.com/yw662/webaudiofont-ts">TypeScript implementation</a>. <a href="#catalog-of-instruments" id="catalog-of-instruments" style="color: inherit; text-decoration: none;"> <h3>Catalog of instruments</h3> </a> The catalog consists of a full set of MIDI standards. Each instrument has 5-10 sound variations from different soundfonts. <ul> <li>Piano<ul> <li>Acoustic Grand Piano: <a href="https://surikov.github.io/webaudiofontdata/sound/0000_Aspirin_sf2_file.html">0</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0000_Chaos_sf2_file.html">1</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0000_FluidR3_GM_sf2_file.html">2</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0000_GeneralUserGS_sf2_file.html">3</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0000_JCLive_sf2_file.html">4</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0000_SBLive_sf2.html">5</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0000_SoundBlasterOld_sf2.html">6</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0001_FluidR3_GM_sf2_file.html">7</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0001_GeneralUserGS_sf2_file.html">8</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0002_GeneralUserGS_sf2_file.html">9</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0003_GeneralUserGS_sf2_file.html">10</a></li> <li>Bright Acoustic Piano: <a href="https://surikov.github.io/webaudiofontdata/sound/0010_Aspirin_sf2_file.html">11</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0010_Chaos_sf2_file.html">12</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0010_FluidR3_GM_sf2_file.html">13</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0010_GeneralUserGS_sf2_file.html">14</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0010_JCLive_sf2_file.html">15</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0010_SBLive_sf2.html">16</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0010_SoundBlasterOld_sf2.html">17</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0011_Aspirin_sf2_file.html">18</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0011_FluidR3_GM_sf2_file.html">19</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0011_GeneralUserGS_sf2_file.html">20</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0012_GeneralUserGS_sf2_file.html">21</a></li> <li>Electric Grand Piano: <a href="https://surikov.github.io/webaudiofontdata/sound/0020_Aspirin_sf2_file.html">22</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0020_Chaos_sf2_file.html">23</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0020_FluidR3_GM_sf2_file.html">24</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0020_GeneralUserGS_sf2_file.html">25</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0020_JCLive_sf2_file.html">26</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0020_SBLive_sf2.html">27</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0020_SoundBlasterOld_sf2.html">28</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0021_Aspirin_sf2_file.html">29</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0021_GeneralUserGS_sf2_file.html">30</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0022_Aspirin_sf2_file.html">31</a></li> <li>Honky-tonk Piano: <a href="https://surikov.github.io/webaudiofontdata/sound/0030_Aspirin_sf2_file.html">32</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0030_Chaos_sf2_file.html">33</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0030_FluidR3_GM_sf2_file.html">34</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0030_GeneralUserGS_sf2_file.html">35</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0030_JCLive_sf2_file.html">36</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0030_SBLive_sf2.html">37</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0030_SoundBlasterOld_sf2.html">38</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0031_Aspirin_sf2_file.html">39</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0031_FluidR3_GM_sf2_file.html">40</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0031_GeneralUserGS_sf2_file.html">41</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0031_SoundBlasterOld_sf2.html">42</a></li> <li>Electric Piano 1: <a href="https://surikov.github.io/webaudiofontdata/sound/0040_Aspirin_sf2_file.html">43</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0040_Chaos_sf2_file.html">44</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0040_FluidR3_GM_sf2_file.html">45</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0040_GeneralUserGS_sf2_file.html">46</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0040_JCLive_sf2_file.html">47</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0040_SBLive_sf2.html">48</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0040_SoundBlasterOld_sf2.html">49</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0041_FluidR3_GM_sf2_file.html">50</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0041_GeneralUserGS_sf2_file.html">51</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0041_SoundBlasterOld_sf2.html">52</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0042_GeneralUserGS_sf2_file.html">53</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0043_GeneralUserGS_sf2_file.html">54</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0044_GeneralUserGS_sf2_file.html">55</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0045_GeneralUserGS_sf2_file.html">56</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0046_GeneralUserGS_sf2_file.html">57</a></li> <li>Electric Piano 2: <a href="https://surikov.github.io/webaudiofontdata/sound/0050_Aspirin_sf2_file.html">58</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0050_Chaos_sf2_file.html">59</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0050_FluidR3_GM_sf2_file.html">60</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0050_GeneralUserGS_sf2_file.html">61</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0050_JCLive_sf2_file.html">62</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0050_SBLive_sf2.html">63</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0050_SoundBlasterOld_sf2.html">64</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0051_FluidR3_GM_sf2_file.html">65</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0051_GeneralUserGS_sf2_file.html">66</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0052_GeneralUserGS_sf2_file.html">67</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0053_GeneralUserGS_sf2_file.html">68</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0054_GeneralUserGS_sf2_file.html">69</a></li> <li>Harpsichord: <a href="https://surikov.github.io/webaudiofontdata/sound/0060_Aspirin_sf2_file.html">70</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0060_Chaos_sf2_file.html">71</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0060_FluidR3_GM_sf2_file.html">72</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0060_GeneralUserGS_sf2_file.html">73</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0060_JCLive_sf2_file.html">74</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0060_SBLive_sf2.html">75</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0060_SoundBlasterOld_sf2.html">76</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0061_Aspirin_sf2_file.html">77</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0061_GeneralUserGS_sf2_file.html">78</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0061_SoundBlasterOld_sf2.html">79</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0062_GeneralUserGS_sf2_file.html">80</a></li> <li>Clavinet: <a href="https://surikov.github.io/webaudiofontdata/sound/0070_Aspirin_sf2_file.html">81</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0070_Chaos_sf2_file.html">82</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0070_FluidR3_GM_sf2_file.html">83</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0070_GeneralUserGS_sf2_file.html">84</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0070_JCLive_sf2_file.html">85</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0070_SBLive_sf2.html">86</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0070_SoundBlasterOld_sf2.html">87</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0071_GeneralUserGS_sf2_file.html">88</a></li> </ul> </li> <li>Chromatic Percussion<ul> <li>Celesta: <a href="https://surikov.github.io/webaudiofontdata/sound/0080_Aspirin_sf2_file.html">89</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0080_Chaos_sf2_file.html">90</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0080_FluidR3_GM_sf2_file.html">91</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0080_GeneralUserGS_sf2_file.html">92</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0080_JCLive_sf2_file.html">93</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0080_SBLive_sf2.html">94</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0080_SoundBlasterOld_sf2.html">95</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0081_FluidR3_GM_sf2_file.html">96</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0081_GeneralUserGS_sf2_file.html">97</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0081_SoundBlasterOld_sf2.html">98</a></li> <li>Glockenspiel: <a href="https://surikov.github.io/webaudiofontdata/sound/0090_Aspirin_sf2_file.html">99</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0090_Chaos_sf2_file.html">100</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0090_FluidR3_GM_sf2_file.html">101</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0090_GeneralUserGS_sf2_file.html">102</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0090_JCLive_sf2_file.html">103</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0090_SBLive_sf2.html">104</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0090_SoundBlasterOld_sf2.html">105</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0091_SoundBlasterOld_sf2.html">106</a></li> <li>Music Box: <a href="https://surikov.github.io/webaudiofontdata/sound/0100_Aspirin_sf2_file.html">107</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0100_Chaos_sf2_file.html">108</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0100_FluidR3_GM_sf2_file.html">109</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0100_GeneralUserGS_sf2_file.html">110</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0100_JCLive_sf2_file.html">111</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0100_SBLive_sf2.html">112</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0100_SoundBlasterOld_sf2.html">113</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0101_GeneralUserGS_sf2_file.html">114</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0101_SoundBlasterOld_sf2.html">115</a></li> <li>Vibraphone: <a href="https://surikov.github.io/webaudiofontdata/sound/0110_Aspirin_sf2_file.html">116</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0110_Chaos_sf2_file.html">117</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0110_FluidR3_GM_sf2_file.html">118</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0110_GeneralUserGS_sf2_file.html">119</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0110_JCLive_sf2_file.html">120</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0110_SBLive_sf2.html">121</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0110_SoundBlasterOld_sf2.html">122</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0111_FluidR3_GM_sf2_file.html">123</a></li> <li>Marimba: <a href="https://surikov.github.io/webaudiofontdata/sound/0120_Aspirin_sf2_file.html">124</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0120_Chaos_sf2_file.html">125</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0120_FluidR3_GM_sf2_file.html">126</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0120_GeneralUserGS_sf2_file.html">127</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0120_JCLive_sf2_file.html">128</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0120_SBLive_sf2.html">129</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0120_SoundBlasterOld_sf2.html">130</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0121_FluidR3_GM_sf2_file.html">131</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0121_GeneralUserGS_sf2_file.html">132</a></li> <li>Xylophone: <a href="https://surikov.github.io/webaudiofontdata/sound/0130_Aspirin_sf2_file.html">133</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0130_Chaos_sf2_file.html">134</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0130_FluidR3_GM_sf2_file.html">135</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0130_GeneralUserGS_sf2_file.html">136</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0130_JCLive_sf2_file.html">137</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0130_SBLive_sf2.html">138</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0130_SoundBlasterOld_sf2.html">139</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0131_FluidR3_GM_sf2_file.html">140</a></li> <li>Tubular Bells: <a href="https://surikov.github.io/webaudiofontdata/sound/0140_Aspirin_sf2_file.html">141</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0140_Chaos_sf2_file.html">142</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0140_FluidR3_GM_sf2_file.html">143</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0140_GeneralUserGS_sf2_file.html">144</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0140_JCLive_sf2_file.html">145</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0140_SBLive_sf2.html">146</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0140_SoundBlasterOld_sf2.html">147</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0141_FluidR3_GM_sf2_file.html">148</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0141_GeneralUserGS_sf2_file.html">149</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0142_GeneralUserGS_sf2_file.html">150</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0143_GeneralUserGS_sf2_file.html">151</a></li> <li>Dulcimer: <a href="https://surikov.github.io/webaudiofontdata/sound/0150_Aspirin_sf2_file.html">152</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0150_Chaos_sf2_file.html">153</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0150_FluidR3_GM_sf2_file.html">154</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0150_GeneralUserGS_sf2_file.html">155</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0150_JCLive_sf2_file.html">156</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0150_SBLive_sf2.html">157</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0150_SoundBlasterOld_sf2.html">158</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0151_FluidR3_GM_sf2_file.html">159</a></li> </ul> </li> <li>Organ<ul> <li>Drawbar Organ: <a href="https://surikov.github.io/webaudiofontdata/sound/0160_Aspirin_sf2_file.html">160</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0160_Chaos_sf2_file.html">161</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0160_FluidR3_GM_sf2_file.html">162</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0160_GeneralUserGS_sf2_file.html">163</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0160_JCLive_sf2_file.html">164</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0160_SBLive_sf2.html">165</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0160_SoundBlasterOld_sf2.html">166</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0161_Aspirin_sf2_file.html">167</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0161_FluidR3_GM_sf2_file.html">168</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0161_SoundBlasterOld_sf2.html">169</a></li> <li>Percussive Organ: <a href="https://surikov.github.io/webaudiofontdata/sound/0170_Aspirin_sf2_file.html">170</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0170_Chaos_sf2_file.html">171</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0170_FluidR3_GM_sf2_file.html">172</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0170_GeneralUserGS_sf2_file.html">173</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0170_JCLive_sf2_file.html">174</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0170_SBLive_sf2.html">175</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0170_SoundBlasterOld_sf2.html">176</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0171_FluidR3_GM_sf2_file.html">177</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0171_GeneralUserGS_sf2_file.html">178</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0172_FluidR3_GM_sf2_file.html">179</a></li> <li>Rock Organ: <a href="https://surikov.github.io/webaudiofontdata/sound/0180_Aspirin_sf2_file.html">180</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0180_Chaos_sf2_file.html">181</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0180_FluidR3_GM_sf2_file.html">182</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0180_GeneralUserGS_sf2_file.html">183</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0180_JCLive_sf2_file.html">184</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0180_SBLive_sf2.html">185</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0180_SoundBlasterOld_sf2.html">186</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0181_Aspirin_sf2_file.html">187</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0181_GeneralUserGS_sf2_file.html">188</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0181_SoundBlasterOld_sf2.html">189</a></li> <li>Church Organ: <a href="https://surikov.github.io/webaudiofontdata/sound/0190_Aspirin_sf2_file.html">190</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0190_Chaos_sf2_file.html">191</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0190_FluidR3_GM_sf2_file.html">192</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0190_GeneralUserGS_sf2_file.html">193</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0190_JCLive_sf2_file.html">194</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0190_SBLive_sf2.html">195</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0190_SoundBlasterOld_sf2.html">196</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0191_Aspirin_sf2_file.html">197</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0191_GeneralUserGS_sf2_file.html">198</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0191_SoundBlasterOld_sf2.html">199</a></li> <li>Reed Organ: <a href="https://surikov.github.io/webaudiofontdata/sound/0200_Aspirin_sf2_file.html">200</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0200_Chaos_sf2_file.html">201</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0200_FluidR3_GM_sf2_file.html">202</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0200_GeneralUserGS_sf2_file.html">203</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0200_JCLive_sf2_file.html">204</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0200_SBLive_sf2.html">205</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0200_SoundBlasterOld_sf2.html">206</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0201_Aspirin_sf2_file.html">207</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0201_FluidR3_GM_sf2_file.html">208</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0201_GeneralUserGS_sf2_file.html">209</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0201_SoundBlasterOld_sf2.html">210</a></li> <li>Accordion: <a href="https://surikov.github.io/webaudiofontdata/sound/0210_Aspirin_sf2_file.html">211</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0210_Chaos_sf2_file.html">212</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0210_FluidR3_GM_sf2_file.html">213</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0210_GeneralUserGS_sf2_file.html">214</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0210_JCLive_sf2_file.html">215</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0210_SBLive_sf2.html">216</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0210_SoundBlasterOld_sf2.html">217</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0211_Aspirin_sf2_file.html">218</a> | <a href="https://surikov.github.io/webaudiofontdata/sound/0211_FluidR3_GM_sf2_file.h