Skip to content

JavaScript MIDI player and synthesizer based on SoundFont2 specifications. Modulator and sf3 support. No dependencies required.

License

Notifications You must be signed in to change notification settings

spessasus/SpessaSynth

Repository files navigation

SpessaSynth logo

SoundFont2 based realtime synthetizer and MIDI player written in JavaScript using Web Audio API. Can also be used as a synthesis library.

SpessaSynth Promotional Image

Light Mode now available!

SpessaSynth in Light mode

SoundFont3 Support now available!

Youtube video

Watch the video

Features

  • SoundFont2 Generator Support
  • SoundFont2 Modulator Support
  • SoundFont3 (vorbis compressed sf2) Support (thanks to stbvorbis.js)
  • Reverb and chorus support
  • A few custom modulators to support some additional controllers (see modulators.js)
  • Written using AudioWorklets (Firefox and Chrome both work perfectly)
  • Legacy system that doesn't use AudioWorklets (Available to use over HTTP and will switch automatically)
  • Can load really large soundfonts (4GB!) (but only on Firefox, Chromium has a memory limit)
  • Multi-port MIDIs support (more than 16 channels)
  • MIDI Controller Support (Default supported controllers can be found here).
  • Supports some Roland GS and Yamaha XG sysex messages
  • High performance mode for playing black MIDIs (Don't go too crazy with the amount of notes though)
  • Visualization of the played sequence with effects like visual pitch bend and note on effects
  • Playable keyboard with various sizes
  • Integrated controller for the synthetizer
  • Can provide very hiqh quality audio while being relatively light on file size thanks to sf3 support
  • Web MIDI API support (Enables physical MIDI devices to be used with the program)
  • WebMidiLink support
  • Can be used as a library (learn more here)
  • Modular design allows easy integrations into other projects
  • Written in pure JavaScript using WebAudio API (Every modern browser supports it)
  • No dependencies (Node.js is only required for the local app, the frontend and audio are vanilla JavaScript)
  • Comes bundled with a compressed SGM SoundFont to get you started

Limitations

  • It might not sound as good as other synthetizers (e.g. FluidSynth or BASSMIDI)
  • The performance is questionable, especially on mobile devices
  • SoundFont3 support seems to be a bit wonky, so if you notice a bug, please open an issue!
  • only real-time, cannot render audio to file (yet)

Installation

When you're loading a large (>4GB) SoundFont, use Firefox because chromium has a 4GB memory limit

Requires Node.js

Windows

  1. Download the code as zip and extract or use git clone https://github.com/spessasus/SpessaSynth
  2. Put your soundfonts into the soundfonts folder. (you can select soundfonts in the program)
  3. Double click the start.bat
  4. Enjoy!

Linux

  1. git clone https://github.com/spessasus/SpessaSynth
    cd SpessaSynth
    npm install && node server.js 
  2. Put your soundfonts into the soundfonts folder. (you can select soundfonts in the program)
  3. Enjoy!

(note that in KDE Plasma 6 the browser auto opening seems to be broken. You must navigate to http://localhost:8181 manually)

Note: the wiki is quite outdated, but most of the methods should still work.

The program is divided into parts:

  • Soundfont2 parser - parses the soundfont file into an object readable by synth
  • MIDI file parser - parses the midi file into an object readable by sequencer
  • Sequencer - plays back the parsed MIDI file. Must be connected to a synthetizer. Can be connected to a renderer
  • Renderer - renders the waveforms of the channels and the falling notes. Must be connected to a synthetizer
  • Synthetizer - generates the sound using the given preset
  • UI classes - used for user interface, connect to their respective parts (eg. synth, sequencer, keyboard etc)

How to use SpessaSynth in your project

Can't use AudioWorklets because your site doesn't support HTTPS? No problem!

todo

  • make the worklet system perform good
  • port the worklet system to emscripten (maybe)
  • fix rare clicking in volenv attack (TR-909 kick for example)

Why did I make this?

Around 1.5 years ago, I discovered a game series called Touhou Project, and after some time I found out that the older installments use MIDI files as the background music. And so the originally called "midi_tester" was born, then I rebranded it to SpessaSynth. The project's complexity quickly outgrew everything I've made so far and I've been working on it ever since. And I hope that you like my work :-)

License

Copyright © 2024 Spessasus. Licensed under the MIT License.

Please note that bundled stbvorbis.js is licensed under the Apache-2.0 license.