A JavaScript library for online music leadsheets (visualizing, playing, editing and other features). 2015 Daniel Martín, Timotée Neullas and Vincent Degroote. Examples and documentation http:https://sonycsl-paris.github.io
Inside the LeadsheetJS folder, you need to run npm to get all the dependencies:
npm install --prod
LeadsheetJS uses RequireJS, so you should have 2 script tags:
<script src="path_to/require.js"></script>
<script src="LeadsheetJS_folder/config.js"></script>and then you can use it this way
require.config({
baseUrl: "path_to_your/LeadsheetJS_folder/",
});
require(
['LJS', '/absolute_path_to_song/song.js'],
function(LeadsheetJS, song) {
//we set the parameters
var params = {
// minimum parameters for viewer
viewer: {HTMLElement: document.getElementById('myViewerDiv')},
// minimum parameters for player
player: {HTMLElement: document.getElementById('myPlayerDiv')},
// minimum parameters for edition (notes chords and structure are editable by default)
edition: {notes: true},
};
// We initialise LeadsheetJS
var myLeadsheet = LeadsheetJS.init(song, params);
// You are using LeadsheetJS
}
);The first part (require.config) defines the LeadsheetJS folder so require can resolve easily all the paths. If you wan't to use your own libraries, you need overload the paths values defined in config.js. For instance if you want to use your own version of jquery, you have to do so:
require.config({
baseUrl: "path_to_your/LeadsheetJS_folder/",
paths:{
jquery: '/my_own_absolute_path/to_my_own_jquery'
}
});The second part is the script that uses LeadsheetJS. Basically it takes a song in a specific JSON format (see json examples at /tests/songs. And it sends it to LeadsheetJS.init together with the desired parameters. This is a simple example of a json song with 2 bars with chords C | Am and as a melody a whole rest and a whole note C/4.
var simpleSong = {
composer: "John ",
title: "Whatever song",
time: "4/4",
changes: [{
id: 0,
name: "A",
bars: [
{
chords: [{p: "C",
ch: "",
beat: 1
}],
melody: [{
keys: ["B/4"],
duration: "wr"
}]
},{
chords: [{
p: "A",
ch: "m",
beat: 1
}],
melody: [{
keys: ["C/4"],
duration: "W"
}]
}]
}]
};There examples of different configurations of LeadsheetJS in http:https://sonycsl-paris.github.io/
Important: for HTML generated by LeadsheetJS to work, the document should by specified as HTML5, so tag <!DOCTYPE html> goes at the top of the page.
To setup the build environments, first install NodeJS and npm.
$ git clone _this_repository_
Then, from the LeadsheetJS/ directory run:
$ cd LeadsheetJS/
$ npm install
$ npm install -g grunt-cli
$ grunt
If you are changing some files you can use grunt watch, it will build LeadsheetJS each time a file is modified.
$ grunt watch
To run tests in the browser, open a new tab:
tests/test.htmlfor functionnal teststests/viewer-test.htmlfor visual tests
You can also run the tests using cli with
$ grunt qunit
Tests use RequireJS and Qunit, like in http:https://www.nathandavison.com/article/17/using-qunit-and-requirejs-to-build-modular-unit-tests
There are some example also in the samples folder.