May 23, 2014

Musical.js

Here is musical.js, which is a small (less than 17K minified) javascript library that can translate from ABC notation into WebAudio, for playing simple tunes on any modern browser. It has no dependencies, and it can be used as a plain script, an AMD module, or as a node.js module. It also includes a simple synthesizer for creating your own instrument, including a basic electric piano sound.

The library is really simple to use. Basically, include the script musical.js, and then:

piano = new Instrument('piano');
piano.play('ccggaag2');

Then with any WebAudio browser, you will be Baahing with the Black Sheep, Twinkling with the Stars, or singing your ABCs with me. The notation used is called ABC Notation, and it is used for a lot of simple sheet music online.

Less-simple music can be played just as easily. Here are some short examples: Minuet, September, Sonata and Moonlight.

The library comes out of work from beefing up music support in Pencil Code. The WebAudio sequencer in that library has improved enough that it deserves to be a separate library.

You can also play with it as part of the turtle library on pencil code here: that example is a simple interactive piano keyboard where you can see the keys.

Have fun. Let me know if you encounter any problems, or if you have any ideas for improvements. Always looking for open-source contributions.

Posted by David at May 23, 2014 03:39 PM
Comments

Hi David,

thanks for musical.js. I incorportated it in a project to draw notes for table harp.

How can I achieve that musical.js obeys the speed denoted in the Q: directive: (e.g. Q:1/4=120)
without pre parsing the ABC - Code and deliver the setting as option to the play method.

B.

Posted by: Bernhard at June 23, 2014 10:47 AM

Hello David,
I'd like to use this library in order to create a small game. Is it possible to know the voice that is being played in events noteon and noteof? I mean, in the ABC string, there could be different voices, and it would be nice to determine the voice id.
Thanks a lot for your work

Posted by: Miguel at May 17, 2017 03:44 AM
Post a comment









Remember personal info?