notator / WebMIDISynthHost

Hosts software Web MIDI Synths that implement a superset of the Web MIDI API Output Device interface.
Other
18 stars 3 forks source link
midi-device midi-player midi-synth midi-synthesizer reverberation-control synthesizers web-midi-synths webaudiofont

Web MIDI Synth Host

2nd May 2022: This repository is now a read-only archive.

To keep things simple, I am now developing just one synthesizer in one repository: the ResidentSynth in the ResidentSynthHost repository.
The ResidentSynth is a direct descendant of ResidentWAFSynth, whose code is archived here.


This is a Web MIDI application, written in HTML5 and Javascript. It can be tried out at
https://james-ingram-act-two.de/open-source/WebMIDISynthHost/host.html

A "Web MIDI Synth" is a GUI-less software synth that uses the Web Audio API to implement the Web MIDI API's Output Device interface.
Web MIDI Synths can be included in websites as a substitute for end-user hardware MIDI Output devices. This makes them especially useful on mobile devices. Also, since they themselves provide the MIDI Output Device interface, they don't depend on browser implementations of the Web MIDI API.

This project was originally started so as to further the discussion about software synths at Web MIDI API issue 124.
It is now being used as a framework demonstrating the use of the Web MIDI Output Device Interface for different GUI-less synthesizers.
Issues and suggestions for the cwMIDISynth should be made in its own repository.
A new, compatible synth could be added to this host as follows:

  1. clone this repository.
  2. create a new folder, parallel to the other synths' folders, for the new synth's files.
  3. create a file that implements the new synth's interface using one of the existing synth definition files as a model. Such definitions can be found in:
    • residentWAFSynth/residentWAFSynth.js
    • residentSf2Synth/residentSf2Synth.js
    • consoleSf2Synth/consoleSf2Synth.js
    • cwMIDISynth/cwMIDISynth.js
    • cwMonosynth/cwMonosynth.js
  4. include code for the new synth at the bottom of host.js (see the instructions there)
  5. implement the interface, and include the synth's file(s) at the bottom of the host.html file

Currently Hosted Synthesizers:

Demo Applications:

There are simple demo applications, showing how to embed the above synths in web pages, at:
SimpleWebAudioFontSynthHost (ResidentWAFSynth)
SimpleSoundFontSynthHost (ResidentSf2Synth)
SimpleMIDISynthHost and SimpleMIDISynthHost2 (CW_MIDISynth).
SimpleMIDISynthHost2 demonstrates how to use a hardware MIDI keyboard to play the synth, and only works in browsers that support the Web MIDI API.

James Ingram
December 2015 (updated February 2016, June 2019, March 2020, April 2020, May 2022)