Webaudiofont
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.
Install / Use
/learn @surikov/WebaudiofontREADME
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 (sss1024@gmail.com) - https://www.linkedin.com/in/sergeysurikov/
Docs
Bug Reports
Code examples
- simple example - code - open
- virtual drums - code - open
- virtual piano - code - open
- endless flute - code - open
- two voices - code - open
- sound fx - code - open
- realtime music - code - open
- dynamic loading - open
- mixer, equalizer and reverberation - open
- custom AHDSR envelope - open
- strum chord - open
- MIDI keyboard - open
- MIDI player - open
Example applications
Pianoroll editor
Fretboard for chords
Auto accompaniment
https://github.com/surikov/rockdice
3D music sequencer
BandLab clone for children
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.AudioContex
Related Skills
openhue
333.3kControl Philips Hue lights and scenes via the OpenHue CLI.
sag
333.3kElevenLabs text-to-speech with mac-style say UX.
weather
333.3kGet current weather and forecasts via wttr.in or Open-Meteo
tweakcc
1.4kCustomize Claude Code's system prompts, create custom toolsets, input pattern highlighters, themes/thinking verbs/spinners, customize input box & user message styling, support AGENTS.md, unlock private/unreleased features, and much more. Supports both native/npm installs on all platforms.
