Click on any of the demos below to get an idea of the types of things you can do with abcjs. If this is your first time using abcjs, the demos in the first section are suggested as they are the easiest to set up. After loading each demo, right-click the webpage and choose "view page source" to see how the demo works.
| Start Here | |
| Basic | A demo of the most bare-boned way to display sheet music. |
|---|---|
| Editor | A demo of the simplest way to present the user with an editor so they can change music on the fly. |
| Basic Synth | A demo of the most basic way to incorporate audio playback using abcjs. |
| Analysis | A demo of the information that is available about an ABC tune book. |
| Visual Demos | |
| Animation | A demo of animated cursor effects that can be added using abcjs. |
| Annotating | A demo showing how to annotate your sheet music using abcjs. |
| Basic | A demo of the most bare-boned way to display sheet music. |
| Change Glyphs | A demo showing how to substitute the music symbols with your own. |
| Line Wrapping | A demo of the line wrapping capabilities. |
| Plugin | A demo showing how to use the plugin version of abcjs. (Useful for sites with a CMS where a user might enter ABC code) |
| Printable | A demo showing how to format the music for printing. |
| Responsive | A demo showing the music filling up whatever available horizontal space is on the page. |
| Zoom To Fit | A demo showing the music filling up whatever available space is on the page. |
| Transpose | A demo showing how to transpose. |
| Output Transposed ABC | A demo showing how to transpose and output the result of the transposition. |
| Tablature | A demo showing how to create tablature. |
| Tune Book | A demo showing how to pick tunes from a tune book. |
| Automatically Add Note Names | A demo of modifying the SVG output after drawing to add note names. |
| Interactive Demos | |
| Dragging | A demo showing how to implement a visual interface that supports dragging. |
| Editor | A demo of the simplest way to present the user with an editor so they can change music on the fly. |
| Editor With Synth | A demo of the editor with synth capabilities |
| Editor With Transpose | A demo of the editor and transposing |
| Audio Demos | |
| Basic Synth | A demo of the most basic way to incorporate audio playback using abcjs. |
| Karaoke | A demo of allowing the user to turn off voices. |
| Microtones | A demo of creating non-western music that relies on a different scale. |
| Modify Synth Input | A demo showing how to tweak the synth after the music has been processed. |
| Play On Repeat | A demo showing how to loop a section of the music. |
| Synth Only | A demo showing how to create sound without any visual representation. |
| Synth Options | A full-featured demo with many synth options. |
| Synth Player | A demo showing how to use abcjs' synth player. |
| Tempo Changing | Showing how to control the tempo. |
| Tune/Instrument Switcher | Showing how to render and switch multiple tunes and change instruments. |
| Swing Feel | Showing how to add a swing feel to the synth. |
| Accompaniment | Showing how to vary the sound of the generated accompaniment. |
| Analysis | |
| Analysis | A demo of the information that is available about an ABC tune book. |
| Parsing | A demo of getting lyrics out of an abc string. |