abcjs logo

Full Synth

This is a complete demo of what you can do with matching audio with the visual music.

Different pieces of music are provided to demonstrate changing tunes. To toggle between the pieces, click "Next Tune".

You are in control of the look of the cursor. Two different techniques are demonstrated: highlighting the note being played and putting a cursor on the page. The class CursorControl must be supplied by your program.

As the piece is playing, there are callbacks when the note changes. The info returned in the callback is printed to the page as it is received.

The visual control for playing music can look different. In this example, the abcjs-audio.css file has been loaded. You can supply your own css.

First start playing to load audio before seeking.
MIDI