May 23, 2014


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');'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

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.


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

Hi David,

The class is great and the piano is very well imitated.

I am trying to use it in a chord maker program

Has the class by chance a method for doing pause and resume ?

Best regards

Posted by: job at July 5, 2018 03:59 PM

Awesome piece of code :-) At is a sample that behaves weirdly:

Set Q:120 and it plays at a good temp but quits about half way through (2 phrases)
Set Q:100 and it gets through the 3rd phrase and a couple of measures beyond . . . and quits
Set Q:80 and it plays REALLY SLOWLY but finishes.

This is on Windows. On my iPad it quits just a couple of measures in. That smells like a timing issue . . . Any clues? Thanks so much.

Another html in my testbed, same song, same behavior:


ABC Test in Musical


var inst = new Instrument('piano');

function scale() {
// Change the inst to sound more like a inst.
// inst.setTimbre('square');
"X:1\n" +
"T:Lyngham-Alfred 4 Voice\n" +
"T:PM\n" +
"C:Thomas Jarman\n" +
"L:1/4\n" +
"Q:80\n" +
"M:4/4\n" +
"K:G\n" +
"%%score (S A) (T B)\n" +
"V:S name=\"S\" clef=treble middle=B\n" +
"V:A name=\"A\" clef=treble middle=B\n" +
"V:T name=\"T\" clef=bass,,\n" +
"V:B name=\"B\" clef=bass,,\n" +
"[V:S] G2 B>c | (d/>e/d/c/B) c | (BG)(AF) | G3 ||B | cB AG | A3A | (B/A/B/c/d) e | d2 ^c2 | d4 ||d2 dd | (B>AG)B | (cBA)G | A3 ||z | z3 G | cc cc | B3B | AA A/B/c/>A/ | dF Gd | (edc)B | A3 A | G4 |]\n" +
"[V:A] D2 D>D | D3 E | D2 D2 | D3 ||G | FG2 E | F3F | G3 G | F2 E2 | F4 ||G2 GG | G3G | (FG2)E | F3 ||z | z3 z | EE EE | D3D | DF F/G/A/>F/ | G3 G | (G2 F)G | G2F2 | G4] |]\n" +
"[V:T] b,,2 g,,>a,, | (b,,/>c,/ b,,/a,,/g,,)g,, | (g,,b,,) (c,,a,,)| b,,3||d, | d,d,d,^c, | d,3d, | (d,>c,b,,)b,, | a,,2 a,,2 | a,,4 ||b,,2 b,, b,, | (d,>c,b,,) d, | d,3^c, | d,3 ||d, | g,, a,, b,, g,, |g,,3g,, | g,,d,b,,g,, | f,,a,, d,c, | b,,a,, b,,b,, | (c,d,d,)d, | d,3c, | b,,4 |]\n" +
"[V:B] g,,2 g,,>g,, | g,,3 c,, | d,,2 d,,2 | g,,3||g,, | a,,g,, f,,e,, | d,,3d,, | g,,3e,, | a,,2 a,,,2 | d,,4 ||g,,2 g,,g,, | g,,3 g,, | a,,g,,f,,e,, | d,,3||d,,| g,, a,, b,, g,, |c,,3c,, | g,,g,, g,,g,, | d,,3d,, | g,,f,, g,,g,, | (c,b,,a,,)g,, | d,,3d,, | g,,,4 |]\n"


Posted by: Alfred Corduan at March 4, 2019 03:50 PM

Since mine is the last comment and it is a bit of a downer I wanted to give credit where credit is due. We figured out the issue above and have made several other minor fixes, including support for fermatas. We are basing a significant hymnbook on this little library because it is cross platform. Rosenís abcjs sounds better and we are using it for scores . . . But it uses a different method for playback that severely limits cross platform playback. This litte guy is the engine that could. I just didnít want to leave a bad impression.

Posted by: Alfred Corduan at June 5, 2020 09:58 AM
Post a comment

Remember personal info?