npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webaudiofont

v3.0.4

Published

Soundfonts for web. About of 2000 musical instruments. GM MIDI compatible.

Downloads

511

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

surikovsurikov

Keywords

audioguitarpianomusicdrumsbeatsoundsynthesizerwavetablemidisoundfontsynthmixerdistortionmicrotonalkontakt

Readme

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.

License

see LICENSE.md. Contact me if you need different license.

Help

Hire me if you need advanced help ([email protected]) - https://www.linkedin.com/in/sergeysurikov/

Docs

API Wiki

Bug Reports

Issues

Code examples

Example applications

Pianoroll editor

Launch Web version

Install Android version

Screenplay

Fretboard for chords

Launch

Auto accompaniment

Launch

Install Android version

Screenplay

3D music sequencer

Launch

Screenplay

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:

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.

Catalog of instruments

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