JavaScriptBank
12-02-2010, 05:26 AM
One more wonderful JavaScript web application (http://www.javascriptbank.com/tag=JavaScript web application) created by JavaScript developers, web developers. That is sheet music no... detail (http://www.javascriptbank.com/tag=sheet music notation) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/utility/marking-your-sheet-music-notation-with-javascript.jpg (http://www.javascriptbank.com/javascript/utility/marking-your-sheet-music-notation-with-javascript/preview/en/)
Demo: JavaScript Marking your Sheet Music Notation with JavaScript (http://www.javascriptbank.com/marking-your-sheet-music-notation-with-javascript.html/en/)
[U]How to setup
Step 1: Place CSS below in your HEAD section
CSS
<style type="text/css">
canvas{
display:block;
border:1px solid #000;
width:100%;
height:300px;
}
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
<script src="canvastext.js"></script>
<script src="ellipse.js"></script>
<script src="notation-viewer.js"></script>
<script src="/javascript/jquery.js"></script>
<script src="js.js"></script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
<form method="post"><select id="file_chooser" name="file"><option>0001 - john w schaum - at sea level</option><option selected="selected">0002 - john w schaum - seize the cs</option></select><select id="zoom"><option value="2">200%</option><option value="1.5">150%</option><option value="1" selected="selected">100%</option><option value=".8">80%</option><option value=".5">50%</option></select></form><canvas id="canvas"></canvas><script>var music={sp:{"work":"","part-list":{"score-part":{_a:{"id":"P1"},"part-name":"Staff 1","score-instrument":{_a:{"id":"P1-I1"},"instrument-name":"Piano 1"},"midi-instrument":{_a:{"id":"P1-I1"},"midi-channel":"1","midi-program":"1"}}},pa:{_a:{"id":"P1"},me:[{_a:{nu:1},at:{di:"1","key":{"fifths":"0"},ti:"4/4",cl:"F/4"},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:2},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:3},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"}]},{_a:{nu:4},no:[{pi:{s:5,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:5},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:6},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:7},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:5,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"}]},{_a:{nu:8},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}],"barline":{_a:{"location":"right"},"bar-style":"light-heavy"}}]}}};</script>
Step 4: downloads
Files
canvastext.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/canvastext.js)
ellipse.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/ellipse.js)
jquery.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/jquery.js)
js.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/js.js)
notation-viewer.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/notation-viewer.js)
JavaScript Enlarge Image (http://www.javascriptbank.com/enlarge-image-2.html/en/) - JavaScript Fading Slide Show (http://www.javascriptbank.com/fading-slide-show.html) - JavaScript Rotating Image script (http://www.javascriptbank.com/rotating-image-script.html)
http://www.javascriptbank.com/javascript.images/utility/marking-your-sheet-music-notation-with-javascript.jpg (http://www.javascriptbank.com/javascript/utility/marking-your-sheet-music-notation-with-javascript/preview/en/)
Demo: JavaScript Marking your Sheet Music Notation with JavaScript (http://www.javascriptbank.com/marking-your-sheet-music-notation-with-javascript.html/en/)
[U]How to setup
Step 1: Place CSS below in your HEAD section
CSS
<style type="text/css">
canvas{
display:block;
border:1px solid #000;
width:100%;
height:300px;
}
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
<script src="canvastext.js"></script>
<script src="ellipse.js"></script>
<script src="notation-viewer.js"></script>
<script src="/javascript/jquery.js"></script>
<script src="js.js"></script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
<form method="post"><select id="file_chooser" name="file"><option>0001 - john w schaum - at sea level</option><option selected="selected">0002 - john w schaum - seize the cs</option></select><select id="zoom"><option value="2">200%</option><option value="1.5">150%</option><option value="1" selected="selected">100%</option><option value=".8">80%</option><option value=".5">50%</option></select></form><canvas id="canvas"></canvas><script>var music={sp:{"work":"","part-list":{"score-part":{_a:{"id":"P1"},"part-name":"Staff 1","score-instrument":{_a:{"id":"P1-I1"},"instrument-name":"Piano 1"},"midi-instrument":{_a:{"id":"P1-I1"},"midi-channel":"1","midi-program":"1"}}},pa:{_a:{"id":"P1"},me:[{_a:{nu:1},at:{di:"1","key":{"fifths":"0"},ti:"4/4",cl:"F/4"},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:2},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:3},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"}]},{_a:{nu:4},no:[{pi:{s:5,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:5},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:6},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:7},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:5,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"}]},{_a:{nu:8},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}],"barline":{_a:{"location":"right"},"bar-style":"light-heavy"}}]}}};</script>
Step 4: downloads
Files
canvastext.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/canvastext.js)
ellipse.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/ellipse.js)
jquery.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/jquery.js)
js.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/js.js)
notation-viewer.js (http://www.javascriptbank.com/javascript/utility/Marking_your_Sheet_Music_Notation_with_JavaScript/notation-viewer.js)
JavaScript Enlarge Image (http://www.javascriptbank.com/enlarge-image-2.html/en/) - JavaScript Fading Slide Show (http://www.javascriptbank.com/fading-slide-show.html) - JavaScript Rotating Image script (http://www.javascriptbank.com/rotating-image-script.html)