Skip to content

Instantly share code, notes, and snippets.

@shimpe

shimpe/abcjs in supercollider

Last active April 26, 2020 07:13
Show Gist options
  • Save shimpe/811da9442a57b81b00a914e62cdda831 to your computer and use it in GitHub Desktop.
Save shimpe/811da9442a57b81b00a914e62cdda831 to your computer and use it in GitHub Desktop.
Download ZIP
abcjs in supercollider
Raw
abcjs in supercollider
// note: the trickiest part to getting scores to work is to
// properly escape all the quotes " and backslashes \ while creating the html string
// showing simple fragment
(
var webview = WebView().minSize_(300@600);
var browser = View(bounds:900@700).layout_(VLayout(webview));
webview.setHtml(html:"<html>
<head>
<meta charset='utf-8'>
<meta http-equiv=\"content-type\" content=\"text/html\" />
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>abcjs demo</title>
<script src=\"https://www.abcjs.net/abcjs_basic_5.9.1-min.js\" type=\"text/javascript\"></script>
</head>
<body>
<div id=\"paper\"></div>
<script type=\"text/javascript\">
ABCJS.renderAbc(\"paper\", \"X:1\\nK:D\\nDDAA|BBA2|\\n\");
</script>
</body>
</html>"
);
browser.front;
)
//a bit more complex
(
var webview = WebView().minSize_(300@600);
var browser = View(bounds:900@700).layout_(VLayout(webview));
webview.setHtml(html:"<html>
<head>
<meta charset='utf-8'>
<meta http-equiv=\"content-type\" content=\"text/html\" />
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>abcjs demo</title>
<script src=\"https://www.abcjs.net/abcjs_basic_5.9.1-min.js\" type=\"text/javascript\"></script>
</head>
<body>
<div id=\"paper\"></div>
<script type=\"text/javascript\">
var data = `
X:1
T:alternate heads
M:C
L:1/8
U:n=!style=normal!
K:C treble style=rhythm
\"Am\" BBBB B2 B>B | \"Dm\" B2 B/B/B \"C\" B4 |\"Am\" B2 nGnB B2 nGnA | \"Dm\" nDB/B/ nDB/B/ \"C\" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |]
%%text This translates to:
[M:C][K:style=normal]
[A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |]
GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb|
[K: style=x]
C/A,/ C/C/E C/zz2|
w:Rock-y did-nt like that
`;
ABCJS.renderAbc(\"paper\", data);
</script>
</body>
</html>"
);
browser.front;
)
//complete piece in four voices
(
var webview = WebView().minSize_(300@600);
var browser = View(bounds:900@700).layout_(VLayout(webview));
webview.setHtml(html:"<html>
<head>
<meta charset='utf-8'>
<meta http-equiv=\"content-type\" content=\"text/html\" />
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>abcjs demo</title>
<script src=\"https://www.abcjs.net/abcjs_basic_5.9.1-min.js\" type=\"text/javascript\"></script>
</head>
<body>
<div id=\"paper\"></div>
<script type=\"text/javascript\">
var data = `
%abc-2.1
%
% Ave_Maria_Arcadelt.abc -*- abc -*-
%
% Written for abcm2ps and abc2midi:
% http://abcplus.sourceforge.net
% Tested with abcm2ps-8.13.17 and abcMIDI-2017.11.27
%
% Edited by Guido Gonzato <guido dot gonzato at gmail dot com>
% Latest update: November 30, 2017
%
% To typeset this file:
% abcm2ps -O= -c Ave_Maria_Arcadelt.abc
% To make a MIDI file:
% abc2midi Ave_Maria_Arcadelt.abc
% load settings for choral scores
% customisation
%%staffsep 90pt
X: 1
T: Ave Maria
T: Mottetto a quattro voci miste
C: Jacob Arcadelt (1514? - 1557)
L: 1/4
M: C
Q: \"Andante moderato\" 1/4=110
%%score [S|A|T|B]
%%MIDI program 1 53 % voice ooh
%%MIDI program 2 53
%%MIDI program 3 53
%%MIDI program 4 53
V: S clef=treble name=\"Soprano\" sname=\"S\"
V: A clef=treble name=\"Alto\" sname=\"A\"
V: T clef=treble-8 name=\"Tenor\" sname=\"T\"
V: B clef=bass name=\"Bass\" sname=\"B\"
Z: Guido Gonzato, November 2017
K: FMaj
%
% Measures 1 - 3
%
[V: S] z !p!AGA|(FG) !breath!A2|Ac!mf!c2|
w: A-ve Ma-ri -a, gra-ti-a
[V: A] z FEC|(DE) !breath!F2|FF F2|
w: A-ve Ma-ri -a, gra-ti-a
[V: T] z ccA|(Ac) !breath!c2|cA A2|
w: A-ve Ma-ri -a, gra-ti-a
[V: B] z F,C,F,|(D,C,) !breath!F,2|F,F, F,2|
w: A-ve Ma-ri -a, gra-ti-a
%
% 4 - 6
%
[V: S] (BA) !p!G2 |z AGA|(FG) A2|
w: ple -na, Do-mi-nus te -cum,
[V: A] F2 E2|z FEC|(DE) F2 |
w: ple-na, Do-mi-nus te -cum,
[V: T] (dc) c2|z ccA|(Ac) c2 |
w: ple -na, Do-mi-nus te -cum,
[V: B] (B,,F,) C,2|z F,C,F,|(D,C,) F,2 |
w: ple -na, Do-mi-nus te -cum,
%
% 7 - 9
%
[V: S] (GA) (B/A/) (G/F/)|G2 F2|!mf!Fc c2|
w: a -ve_ Ma -ri-a. Be-ne-di-
[V: A] (EF) FD |E2 F2| FF F2|
w: a -ve Ma- ri- a. Be- ne-di-
[V: T] c2 dA |c2 A2| AA A2|
w: a-ve Ma-ri-a. Be-ne-di-
[V: B] (C,F,) B,,D, |C,2 F,,2| F,F, F,2|
w: a -ve Ma-ri-a. Be-ne-di-
%
% 10 - 12
%
[V: S] (de) f2 |!mf!eccd|!breath!ef (f/e/) (d/c/)|
w: cta -tu, be-ne-di-cta tu, in mu -li -
[V: A] (FA) A2 | AEEG|!breath!GAGE |
w: cta -tu, be-ne-di-cta tu, in mu-li-
[V: T] (G^c) d2| =ccc=B|!breath!cccc |
w: cta -tu, be-ne-di-cta tu, in mu-li-
[V: B] (D,A,,) D,2 | A,A,A,G,|!breath!C,F,C,A,|
w: cta -tu, be-ne-di-cta tu, in mu-li-
%
% 13 - 15
%
[V: S] d>d !breath!c!p!F|cc (de) |!breath!f2 !mf!ec |
w: e-ri-bus et be-ne-di -ctus fruc-tus
[V: A] G>G !breath!E F|FF (FA) |!breath!A2 AE |
w: e-ri- bus et be-ne-di -ctus fruc-tus
[V: T] =BB !breath!c A|AA (A^c)|!breath!d2 =cc|
w: e-ri-bus et be-ne-di -ctus fruc-tus
[V: B] G,G,, !breath!C, F,|F,F, (D,A,,) |!breath!D,2 A,A,|
w: e-ri-bus et be-ne-di -ctus fruc-tus
%
% 16 - 19
%
[V: S] (cd) e(f-|f/e/) d/c/ d2|c2 z2|z !f!ffe|
w: ven -tri tu-i___ Je-sus. San-cta Ma-
[V: A] (EG) G(A |G)E G2 |E2 z2|z AAA|
w: ven -tri tu-i_ Je-sus. San-cta Ma-
[V: T] (c=B) cc |c2 (c=B) |c2 z2|z ccc|
w: ven -tri tu-i_ Je-sus. San-cta Ma-
[V: B] (A,G,) C,F,|(C,A,) G,2 |C,2 z2|z F,F,A,|
w: ven -tri tu-i_ Je-sus. San-cta Ma-
%
% 20 - 23
%
[V: S] d2 !breath!^c2|!p!=c2 d2|d2 c (B/A/)|B2 A2|
w: ri-a o-ra, o-ra pro_ no-bis.
[V: A] F2 !breath!E2 | E2 F2 |F2 FF |F2 F2|
w: ri-a o-ra, o-ra pro no-bis.
[V: T] A2 !breath!A2 | G2 B2 |B2 Ac |d2 c2|
w: ri-a o-ra, o-ra pro no-bis.
[V: B] D,2 !breath!A,,2 | C,2 B,,2 |B,,2 F,F,|B,,2 F,2|
w: ri-a o-ra, o-ra pro no-bis.
%
% 24 - 26
%
[V: S] z !mf!Acd|c2 !breath!B2|A2 GA|
w: San-cta Ma-ri-a, o-ra o-
[V: A] z FFF|F2 !breath!D2|F2 CC|
w: San-cta Ma-ri-a, o-ra o-
[V: T] z cAB|A2 !breath!G2|A2 cF|
w: San-cta Ma-ri-a, o-ra o-
[V: B] z F,F,B,,|F,2 !breath!G,2|D,2 E,F,|
w: San-cta Ma-ri-a, o-ra o-
%
% 27 - 29
%
[V: S] (B/A/) (G/F/) G2|!fermata!F2 (FA)|cdcB|
w: ra_ pro -no-bis. San -cta Ma-ri-a,
[V: A] DA, C2 | C2 (CF)|FFFD|
w: ra pro no-bis. San -cta Ma-ri-a,
[V: T] FF (FE) | F2 (AF)|GBAG|
w: ra pro no -bis. San -cta Ma-ri-a,
[V: B] B,,D, C,2 | F,,2 (F,D,)|C,B,,F,G,|
w: ra pro no-bis. San -cta Ma-ri-a,
%
% 30 - 33
%
[V: S] \"^pi\\`u lento\"A2 GA|(B/A/) (G/F/) G2|!fermata!F2 \"^largo\"!pp!F2|F4 |]
w: o-ra, o-ra_ pro_ no-bis. A-men.
[V: A] F2 CC|DA, C2 | C2 D2|C4 |]
w: o-ra, o-ra pro no-bis. A-men.
[V: T] A2 cF|FF (FE) | F2 B2|A4 |]
w: o-ra, o-ra pro no -bis. A-men.
[V: B] D,2 E,F,|B,,D, C,2 | F,,2 B,,2|F,,4 |]
w: o-ra, o-ra pro no-bis. A-men.
%
% End of file Ave_Maria_Arcadelt.abc
`;
ABCJS.renderAbc(\"paper\", data);
</script>
</body>
</html>
");
browser.front;
)
(
// magic: automagically scrape text and turn into notation
var webview = WebView().minSize_(300@600);
var browser = View(bounds:900@700).layout_(VLayout(webview));
webview.setHtml(html:"<html>
<head>
<meta charset='utf-8'>
<meta http-equiv=\"content-type\" content=\"text/html\" />
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>abcjs plugin demo: after</title>
<script src=\"https://www.abcjs.net/abcjs_plugin_5.9.1-min.js\" type=\"text/javascript\"></script>
</head>
<body>
<pre>
<pre>
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
</pre>
</pre>
</body>
</html>"
);
browser.front;
)
@shimpe
Copy link
Author

shimpe commented Apr 25, 2020

also see vexflow based one https://gist.github.com/shimpe/0cfc3131cfab2dd8f0bff0f482e29fc6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment