Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up

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.

License

NotificationsYou must be signed in to change notification settings

surikov/webaudiofont

Repository files navigation

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, seeCatalog.

License

seeLICENSE.md. Contact me if you need different license.

Help

Hire me if you need advanced help (sss1024@gmail.com) -https://www.linkedin.com/in/sergeysurikov/

Docs

APIWiki

Bug Reports

Issues

Code examples

Example applications

Pianoroll editor

Launch Web version

Install Android version

Screenplay

Fretboard for chords

Launch

Screenshot

Auto accompaniment

https://github.com/surikov/rockdice

Screenplay

3D music sequencer

Launch

Screenplay

BandLab clone for children

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><scriptsrc='https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js'></script><scriptsrc='https://surikov.github.io/webaudiofontdata/sound/0250_SoundBlasterOld_sf2.js'></script><script>varAudioContextFunc=window.AudioContext||window.webkitAudioContext;varaudioContext=newAudioContextFunc();varplayer=newWebAudioFontPlayer();player.loader.decodeAfterLoading(audioContext,'_tone_0250_SoundBlasterOld_sf2');functionplay(){player.queueWaveTable(audioContext,audioContext.destination,_tone_0250_SoundBlasterOld_sf2,0,12*4+7,2);returnfalse;}</script></head><body><p><ahref='#"auto">Seelive example.
Use queueWaveTable to play single note. Use queueChord, queueSnap, queueStrumDown, queueStrumUp to play chords. Seelive example for strumming.
Use time for notes to define sequence. Seelive example of sequencer.
Dynamic loading
Use the startLoad and waitLoad functions.
varinstr=null;varAudioContextFunc=window.AudioContext||window.webkitAudioContext;varaudioContext=newAudioContextFunc();varplayer=newWebAudioFontPlayer();functionchangeInstrument(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.
Seelive example
Effects and mixer
Use WebAudioFontChannel to create a chain of 10-band equalizers.Use WebAudioFontReverberator to add echo.
Seelive example
Custom samples
Seetutorial
Installation
WebAudioFont doesn't require installation. It hosts all code and instruments atGitHub Pages.
Minimal NPM code (if you need this)
JavaScript
varwebaudiofont=require('webaudiofont');varplayer=newWebAudioFontPlayer();
package.json
..."devDependencies": {"webaudiofont":"^2.5.0"...
Parts of WebAudioFont
WebAudioFont usesWeb Audio API to play instruments.Synthesizer useswavetables to play sound.Instruments came from free soundfonts:
How to use catalog of sounds:
  • openindex 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. Seelive 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. Seelive example.
How to get help
Feel free to ask for any kind of help atproject issues.
ReactJS
SeeReactJS implementation.
Catalog of instruments
The catalog consists of a full set of MIDI standards. Each instrument has 5-10 sound variations from different soundfonts.

About

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.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp