abcjs is an open source javascript rendering engine for interpreting abc formatted tunes.
Used with abcjs and <pre> tags, It will render sheet music entirely in your browser.
It was written in 2009-2018 by Gregory Dyke and Paul Rosen.
This page demonstrates a simple way to use it in your own pages when you want a minimum of interaction.
For more information, see the GitHub project page.
Place your ABC music syntaxed text within <pre> tags.
The abcjs min places rendered music into a <div> that it creates on the page.
Printing a tune window.print() Control+P works well for simple pages that contain only the material to print, but starts to become a problem if you try to write js to control which part of a page will be printed.
We collect most of our music sheets into a separate directory so that printing becomes much easier. When these pages are visited, a link is provided to draw the dots.
abc notation is generally stored in a separate directory and each tune looks for matching abc filenames to render. Tunes are loaded via loadView(music-tune) and abc-tunes-by-pattern with each separate abc notation file loaded via view abc-music The rendering is loaded via a PHP class
musicMethods->renderABC(FULLPATH,TRANSPOSE);
So all the print control code should start with this PHP function and the print button view abc-print-button This button calls JS prOb.printSome(CONTENT), which links to music-sheets/print after placing the content into SESSION. It then uses window.print() from this new simple page to print only this specific content. Ajax is used to place the correct content into SESSION['print']
Check the tunes to see if print buttons appear. Tunes
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|"Em"EB{c}BA B2 EB|~B2 AB dBAG|"D"FDAD BDAD|FDAD dAFD|
"Em"EBBA B2 EB|B2 AB defg|"D"afe^c dBAF|"Em"DEFD E2:|
|:gf|"Em"eB B2 efge|eB B2 gedB|"D"A2 FA DAFA|A2 FA defg|
"Em"eB B2 eBgB|eB B2 defg|"D"afe^c dBAF|"Em"DEFD E2:|
The ABC was provided within <pre> tags, which become rendered into <div class="abctext"> and <div class="abcrendered">
abcjs should handle the hiding of all class="abctext" so that only the rendered version appears on the page.
You could wrap a container <div> around your abc <pre> music and then look for the first <'div class="abcrendered" > within it.
Our podcasts trigger ABC notation at certain time points using code that works this way.
Our tune pages use :
$('.abctext').addClass('hidden');
in jsReady code.