Skip to content
Use full GM set of musical instruments to play MIDI and single sounds or effects. Support for reverberation and equaliser. No plugins, no Flash. Pure HTML5 implementation compatible with desktop and mobile browser. See live examples.
JavaScript
Branch: master
Clone or download
Latest commit dc58dc9 Sep 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Aug 7, 2019
examples example Mar 10, 2019
img img Jan 12, 2018
npm 0250->0253 Jul 29, 2019
.DS_Store example Mar 10, 2019
.gitignore mid Apr 22, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Aug 7, 2019
LICENSE.md Create LICENSE.md Oct 29, 2016
README.md wiki Sep 13, 2019
_config.yml Set theme jekyll-theme-minimal Apr 14, 2017
package-lock.json devlibs Nov 27, 2018
package.json 0250->0253 Jul 29, 2019

README.md

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.

Code examples

Example applications

Use cases

  • Virtual instruments
  • Interactive music generated on the fly
  • Sound effects for non-music applications

Content

How to use

Add a link to WebAudioFontPlayer.js and the instrument file. Invoke queueWaveTable.

Hello, world

Minimal HTML page

<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>

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.

Dynamic loading

Use the startLoad and waitLoad functions.

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

Effects and mixer

Use WebAudioFontChannel to create a chain of 10-band equalizers. Use WebAudioFontReverberator to add echo.

See live example

Custom samples

See tutorial

Installation

WebAudioFont doesn't require installation. It hosts all code and instruments at GitHub Pages.

Minimal NPM code (if you need this)

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:

Catalog of instruments

The catalog consists of a full set of MIDI standards. Each instrument has 5-10 sound variations from different soundfonts.

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.

Player

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.

License

see LICENSE.md.

You can’t perform that action at this time.