javascript for rendering abc music notation What?

Why?

How?

Which?

Where?

Can I?

Why might I need this? This library is for a web designer or a web programmer who wants to display standard music notation on their website. It can also be used for generating MIDI on a website. You just need the barest familiarity with JavaScript to make it work.

What is this? Turn this: into this: What, you ask, is ABC Music Notation? There are lots of explanations around the web. Here's a good place to start.

How do I use this? Check out the following simplest possible demos using the minimized version: ☞ Basic Usage

Basic Usage ☞ Music Editor

Music Editor ☞ For Existing Sites Check out the following simplest possible demos using the minimized version: There are also a series of demos showing how to use the npm version. Go here and look for all projects whose name starts with vue-abcjs-. There are lots of options for how to configure abcjs. To explore all the ways the library can be used, see the configurator. And here's an application that uses the editor: And here's an application that uses the editor: Draw The Dots

Where do I get this? The project is hosted on Github. Go there for all technical information about the project. To install with npm: npm install --save abcjs If you are not using a build package, and want to include the minimized scripts, here are the latest versions. You can just download these and include them in your page: These contain everything you need:

abcjs engraving + synth

abcjs-plugin

Greasemonkey

Which one do I need? Packaged Method ☞If you are using package.json, then you can simply install abcjs the way you normally would and ignore the rest of these instructions: npm install --save abcjs Minimized Method The abcjs libraries come in two flavors: abcjs basic: Call the library from javascript, passing the abc string to it, or allow the user to type the music in a textarea.

abcjs plugin: Adds onto a webpage, rendering all ABC it finds. WordPress ☞If you are using WordPress, you can use the "ABC Notation" plugin. Just click "Add New" on the plugin page and search for "ABC Notation". Or get it here: WordPress Plugin. Add In ☞If you already have ABC notation on your page and don't want to modify the page more than you have to, then you can use abcjs-plugin, which will render all ABC that it finds on the page on page load, simply by including one line: the line to include the script. This can also be useful if you allow user comments and you want users to be able to add ABC in a comment. ☞If you are looking at someone else's website and see ABC on the page and want to see what it looks like in standard notation, you can install the greasemonkey script in FireFox or Chrome and it will render the ABC for you just like the abcjs-plugin does.