| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="icon" href="favicon.ico" type="image/x-icon"/> |
| <link rel="stylesheet" href="examples-styles.css"/> |
|
|
| <title>abcjs: Glyph Demo</title> |
| <script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| var abc1 = "X:1\nT:Quarter Tones\n%%scale 3\nK: C ^/f _/B\n_/C^/C _/c^/c _/B^/B|\n"; |
| var abc2 = "X:1\nT:Koron and Sori\n%%scale 3\nK: C ^/f _/B\n_/C^/C _/c^/c _/B^/B|\n"; |
| |
| var koron = { d: [ |
| ['M',0,-4], |
| ['l', 0, 20], |
| ['l', 1.5, 0], |
| ['l', 0, -12], |
| ['l', 8.5, -4], |
| ['l', -8.5, -4], |
| ['l', 0, 1.5], |
| ['l', 6, 2.5], |
| ['l', -6, 2.5], |
| ['l', 0, -6.5], |
| ['z']],w:10,h:20 |
| }; |
| |
| var sori = { d: [ |
| ['M',0,-9], |
| |
| ['m',3,0.82], |
| ['l',0, 19.18], |
| ['l', 1.70, 0], |
| ['l', 0, -19.18], |
| ['z'], |
| |
| |
| ['m',3.06,-0.82], |
| ['l',0, 19.18], |
| ['l', 1.7, 0], |
| ['l', 0, -19.18], |
| ['z'], |
| |
| |
| ['m', -6.06,3.2], |
| ['l', 3, 1.29], |
| ['l',0, 1.39], |
| ['l',-3,-1.29], |
| ['l',0,-1.39], |
| ['z'], |
| ['m', 4.7,1.95], |
| ['l', 1.25, .6], |
| ['l',0, 1.39], |
| ['l',-1.25,-.6], |
| ['l',0,-1.39], |
| ['z'], |
| ['m', 3,1.3], |
| ['l', 4.5, 2.5], |
| ['l', -2.25,0], |
| ['l',-2.2,-1.1], |
| ['l',0,-1.39], |
| ['z'], |
| |
| |
| ['m', 0,5], |
| ['l', 4.5, -2.5], |
| ['l', -2.25,0], |
| ['l',-2.2,1.1], |
| ['l',0,1.39], |
| ['z'], |
| ['m', -3,1.5], |
| ['l', 1.25, -.6], |
| ['l',0, -1.39], |
| ['l',-1.25,.6], |
| ['l',0,1.39], |
| ['z'], |
| ['m', -4.2,1.7], |
| ['l', 3, -1.29], |
| ['l',0, -1.39], |
| ['l',-3,1.29], |
| ['l',0,1.39], |
| ['z']],w:15,h:20 |
| }; |
| |
| function load() { |
| ABCJS.renderAbc("paper1", abc1); |
| ABCJS.setGlyph('accidentals.halfflat', koron); |
| ABCJS.setGlyph('accidentals.halfsharp', sori); |
| ABCJS.renderAbc("paper2", abc2); |
| } |
| |
| </script> |
| </head> |
| <body onload="load()"> |
| <header> |
| <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
| <h1>Changing Glyphs</h1> |
| </header> |
| <div class="container"> |
| <p> |
| This is an example of modifying the font used to create the music. In this case, the <b>quarter sharp</b> |
| and <b>quarter flat</b> symbols are changed to the Koron and Sori symbols. |
| </p> |
| <p> |
| The path supplied must use <b>relative</b> positioning. |
| </p> |
| <p> |
| NOTE: Use this feature at your own risk because the format of the font may change in the future! |
| </p> |
| <div id="paper1"></div> |
| <div id="paper2"></div> |
| </div> |
| </body> |
| </html> |
|
|
