GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → surikov → Webaudiofont

surikov / Webaudiofont

Licence: gpl-3.0
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.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

audiomusicplayermusic-playermidisoundsynthesizersynthmusic-compositioninstrument

Projects that are alternatives of or similar to Webaudiofont

Romplayer
AudioKit Sample Player (ROM Player) - EXS24, Sound Font, Wave Player
Stars: ✭ 445 (-25.83%)
Mutual labels:  audio, music, player, midi, sound, synthesizer, synth
Audiokitsynthone
AudioKit Synth One: Open-Source iOS Synthesizer App
Stars: ✭ 1,258 (+109.67%)
Mutual labels:  audio, music, midi, sound, synthesizer, synth
Awesome Music Production
A curated list of software, services and resources to create and distribute music.
Stars: ✭ 340 (-43.33%)
Mutual labels:  audio, music, midi, sound, synthesizer, instrument
Dx7 Supercollider
My accurate Yamaha DX-7 clone. Programmed in Supercollider.
Stars: ✭ 395 (-34.17%)
Mutual labels:  audio, music, sound, synthesizer, synth, instrument
Javascriptmusic
Live coding music and synthesis in Javascript / AssemblyScript (WebAssembly)
Stars: ✭ 193 (-67.83%)
Mutual labels:  audio, music, synthesizer, synth, music-composition
Swift Radio Pro
Professional Radio Station App for iOS!
Stars: ✭ 2,644 (+340.67%)
Mutual labels:  audio, music, player, music-player, sound
Pandoraplayer
🅿️ PandoraPlayer is a lightweight music player for iOS, based on AudioKit and completely written in Swift.
Stars: ✭ 1,037 (+72.83%)
Mutual labels:  audio, music, player, music-player, sound
Jssynth
Make music in your browser with this synthesizer and sequencer
Stars: ✭ 25 (-95.83%)
Mutual labels:  audio, music, synthesizer, synth, instrument
React Cassette Player
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Stars: ✭ 93 (-84.5%)
Mutual labels:  audio, music, player, music-player
Webmidikit
Simplest MIDI Swift library
Stars: ✭ 100 (-83.33%)
Mutual labels:  audio, music, midi, sound
Tauonmusicbox
The Linux desktop music player from the future! 🌆
Stars: ✭ 494 (-17.67%)
Mutual labels:  audio, music, player, music-player
Giada
Your Hardcore Loop Machine.
Stars: ✭ 903 (+50.5%)
Mutual labels:  audio, music, midi, music-composition
Sbplayerclient
支持全格式的mac版视频播放器
Stars: ✭ 110 (-81.67%)
Mutual labels:  audio, music, player, music-player
Musicplayer
A minimal music player built on electron.
Stars: ✭ 145 (-75.83%)
Mutual labels:  audio, music, player, music-player
Minibae
The platform-neutral Beatnik Audio Engine, Mini Edition (miniBAE) is an exceptionally mature, well-rounded, and reliable computer music and sound system specially customized for small-footprint and embedded applications.
Stars: ✭ 82 (-86.33%)
Mutual labels:  audio, music, midi, sound
Sonic Pi
Code. Music. Live.
Stars: ✭ 8,736 (+1356%)
Mutual labels:  audio, music, synthesizer, instrument
Gwion
🎵 strongly-timed musical programming language
Stars: ✭ 235 (-60.83%)
Mutual labels:  audio, music, sound, synth
Skplayer
🎵 A simple & beautiful HTML5 music player
Stars: ✭ 437 (-27.17%)
Mutual labels:  audio, music, player, music-player
Otto
Sampler, Sequencer, Multi-engine synth and effects - in a box! [WIP]
Stars: ✭ 2,390 (+298.33%)
Mutual labels:  audio, music, synthesizer, synth
Main-Supercollider-Files
my supercollider codes, version history is at the branches
Stars: ✭ 21 (-96.5%)
Mutual labels:  sound, instrument, synthesizer, synth
View All Similar Projects ➔

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.

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:

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].