jsNoteEditor is a jQuery plugin for simple one-voice note editing.
You can get jsNoteEditor from the project page.
... <head> ... <!-- Including CSS --> <link href="/js/jsnoteeditor/style.css" rel="stylesheet"> <!-- Including libraries --> <script src="/js/jquery-2.0.2.js"></script> <script src="/js/jquery-ui.js"></script> <script src="/js/jsnoteeditor/noteeditor.js"></script> ... </head> ... <body> ... <!-- This is the editor element --> <div class="noteeditor"></div> ... </body> ...
$(document).ready(function() {
// Applying plugin to the element
var ne_elems = $('.noteeditor').noteEditor();
// We have only one editor on this page so we are selecting the first element.
var ne = ne_elems.eq(0);
// from henceforth we can call plugin functions like this: ne.func('getJSON').
// The following lines demonstrate working with
// two functions -- 'getJSON' and 'importFromJSONString'.
// 'Show JSON' button
$('#btn_show_json').click(function() {
$('#melody_json').text(ne.func('getJSON'));// getting JSON from editor
$('#melody_json_block').slideDown(500);
});
// 'Load sample melody' button
$('#btn_load_JB').click(function() {
// In this function we are making JSON string and importing it into editor.
// The string can be as well loaded from a DB.
// very long string
var melodyJson = '{"meta":{},"notes":['
+ '{"element_type":"note","octave":0,"staffSteps":2,"notePos":2,'
+ '"duration":4,"alter":"","dotted":false,"note_id":4,"lyrics":"Jin-","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":2,"notePos":2,'
+ '"duration":4,"alter":"","dotted":false,"note_id":4,"lyrics":"gle","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":2,"notePos":2,'
+ '"duration":2,"alter":"","dotted":false,"note_id":4,"lyrics":"bells","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":2,"notePos":2,'
+ '"duration":4,"alter":"","dotted":false,"note_id":4,"lyrics":"Jin-","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":2,"notePos":2,'
+ '"duration":4,"alter":"","dotted":false,"note_id":4,"lyrics":"gle","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":2,"notePos":2,'
+ '"duration":2,"alter":"","dotted":false,"note_id":4,"lyrics":"bells","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":2,"notePos":2,'
+ '"duration":4,"alter":"","dotted":false,"note_id":4,"lyrics":"Jin-","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":4,"notePos":4,'
+ '"duration":4,"alter":"","dotted":false,"note_id":7,"lyrics":"gle","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":0,"notePos":0,'
+ '"duration":4,"alter":"","dotted":false,"note_id":0,"lyrics":"all","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":1,"notePos":1,'
+ '"duration":4,"alter":"","dotted":false,"note_id":2,"lyrics":"the","tabs":""},'
+ '{"element_type":"note","octave":0,"staffSteps":2,"notePos":2,'
+ '"duration":1,"alter":"","dotted":false,"note_id":4,"lyrics":"way.","tabs":""}'
+ ']}';
ne.func('importFromJSONString', melodyJson);// importing JSON data
});
});