Interactive Browser Music

Recently, there have been many examples of using the Web Audio API for synthesizing sound in a browser. You can get acquainted with the most interesting projects in this area on the Audiocrawl.co website:



What libraries / frameworks can I use to create audio applications? There is MIDI.js , a search on Github can still find several different degrees of abandonment.
')
But I would like something more:

• a complete set of virtual instruments, not just a piano or a sine wave;
• change music even during playback;
• play individual notes / chords;
• should work including on mobile platforms.

And there is such a library!

This is SSSynthesiser.js . Examples of use can be found on the project page.

General ideology

• music is prepared in the Molgav service (you can make your own, you can import from MID, you can take it from the shared library );
• saved in JSON format along with samples, tracks, notes, etc .;
• The resulting file can be downloaded and played using SSSynthesiser.js ;
• downloaded JSON can be changed using standard Javascript tools at any time.

Example use with WebGL

Distinctive characteristics

• You can use any of thousands of tools Molgav service (several banks with a full set of MIDI, from guitars to saxophones);
• There is a huge library of ready-made songs ( open ) from the services of ultimate-guitar.com and songsterr.com .

Code examples

Library connection:

<script src="SSSynthesiser.js"></script> 

Initialization and loading:

 var sssynthesiser = null; var xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.open('GET', "http://site/x/sviridovtimeforward.molgav", true); xmlHttpRequest.onload = function () { var o = JSON.parse(xmlHttpRequest.response); sssynthesiser = new SSSynthesiser(o); }; xmlHttpRequest.send(); 

Of course, the site must be configured CORS .

Reproduction:

 sssynthesiser.startPlaySong(); 

One note:

 sssynthesiser.playKey(sssynthesiser.findSampleBySubPath(s),1000,45); 

where 45 is the note height on the MIDI scale, in this case it is A3, i.e. La third octave.

One chord:

 sssynthesiser.playChord(sssynthesiser.findSampleBySubPath(s),2000,[48,52,55,60,64]); 

where 48,52,55,60,64 is the height of the notes on the MIDI scale.

JSON file format

An example can be found here . Ideologically, it is close to the tracker files and contains sampled instruments in addition to notes.

Performance

In SSSynthesis.js , samples are mixed directly during the production. Nevertheless, the sound is seamlessly synthesized even on very weak phone models.

Compatible with Chrome / Safari / Firefox / Opera / MSEdge on the desktop and mobile platforms, Godless IE of course in the span.