Draggable Music Notation Editor - jsNoteEditor

jsNoteEditor is a simple, dynamic, draggable, client-side Music Notation Editor to create orchestrations of up to eight staves. Built using jQuery and jQuery UI draggable function.

You can export the music into JSON strings and import the music from a JSON file into the music notation editor.

How to use it:

1. Include the necessary jQuery and jQuery UI libraries on the page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. Include the jQuery jsNoteEditor's JavaScript and Stylesheet on the page.

<link href="style.css" rel="stylesheet">
<script src="noteeditor.js"></script>

3. Create a container in which you want to place the Music Notation Editor.

<div class="noteeditor"></div>

4. The JavaScript to create a new Music Notation Editor.

var myEditor = $('.noteeditor').noteEditor();

5. Export the music into JSON strings.

myEditor.func('getJSON');

6. Export the music into JS objects.

myEditor.func('getMelodyObject');

7. Import the music from JSON strings.

var myData = {"meta":{},"notes":[{"element_type":"note","octave":0,"staffSteps":4,"notePos":4,"duration":4,"alter":"","dotted":false,"note_id":7,"lyrics":"jquery","tabs":""},{"element_type":"note","octave":0,"staffSteps":4,"notePos":4,"duration":16,"alter":"","dotted":false,"note_id":7,"lyrics":"script","tabs":""},{"element_type":"rest","octave":0,"staffSteps":4,"notePos":4,"duration":4,"alter":"","dotted":false,"note_id":7,"lyrics":".net","tabs":""},{"element_type":"note","octave":0,"staffSteps":4,"notePos":4,"duration":32,"alter":"","dotted":false,"note_id":7,"lyrics":"","tabs":""}]}

myEditor.func('importFromJSONString', myData);

---

This awesome jQuery plugin is developed by Polar-Fox. For more Advanced Usages, please check the demo page or visit the official website.