@ukegeeks/song-formatter
Version:
Convert ChordPro markup text to HTML with chord fingering diagrams
219 lines (182 loc) • 5.85 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>UkeGeeks: Song Formatter Demos</title>
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" type="text/css" href="../dist/song-formatter.bundle.css" />
</head>
<body>
<article>
<header>
<hgroup>
<h1>UkeGeeks: Song Formatter Demos</h1>
</hgroup>
</header>
<div id="ukeSongMeta" class="metaInfo"></div>
<div id="ukeSongContainer" class="ugsLayoutTwoColumn ugs-song-wrap">
<aside id="ukeChordsCanvas" class="ugs-diagrams-wrap ugs-grouped">
</aside>
<section id="ukeSongText" class="ugs-source-wrap">
<pre>
{title: A Song Markup Sampler (this is Song Title)}
{artist: Capability R. Brown}
{subtitle: A "coloring inside the lines" exercise}
{c:Intro}
[Dm] [Gm] [Dm] [Gm] [D7]
{c:The Goal}
Frequently [Dm]you'll get
A [Am]song
That's written out
Like [Dm]Poetry
Very wordy...
And [Am]lengthy..
[F]How to make it [C]fit
Onto
The single page?
# does this get ignored?
{soc}
{c:Chorus}
[Dm7]Gummies chocolate cake macaroon.
Muffin [C]halvah sweet gummi bears
[G7]Danish cupcake.
[Dm7]Sugar plum powder
Pudding [C]pudding jelly marzipan.
[D7]Liquorice sugar [C]plum [F]
{eoc}
{c: Verse 2}
Topping [Dm]applicake [Am]gingerbread [Gm]wypas.
[Dm]Donut I love [Am]caramels donut
Chocolate [Dm]bar wafer [Am]bonbon lemon [Gm]drops.
Tootsie [Dm]roll carrot [Am]cake biscuit [Gm]cupcake. [F]
{c: Repeat CHORUS}
{c: Mulitple Tab Staffs In One Block}
Note that the second groups lines are "uneven";
in this case the longest line sets final width/length.
{start_of_tab}
A----------------------------------------------0----------0---2---2--|
E---0-------0---2-------0---2---3------2---3----------3--------------|
C-------3------------------------------------------------------------|
G--------------------------------------------------------------------|
{eot}
{sot}
A----------2---0-----------------------------------------------------|
E---0--------------3---2---0-----------
C-----------------------------------------
G---------------
{end_of_tab}
{column_break}
{c: Verse 3}
So, how
How [Dm]did this turn out?
[Am]Does it fit your [Dm]page
[F]Or [Am]screen?
[C]Excel[F]lent!
{c: Outro}
[Dm] [Gm] [D7]
I want to go [G]back to my little grass shack
In Kealakekua, [A7]Hawaii
I want to [D7]be with all the kanes and wahines
That I used to [G]know... so long ago
I can [B7]hear the old guitars a-playing[E7]
On the beach at Honaunau
I can [A7]hear the old Hawaiians saying
"Komo [D7]mai no kaua i ka hale welakahau"
{start_of_tabs}
-----2---2-----------3-3---
---3---3---3-------0-------
-2---------------0---------
---------------------------
{end_of_tabs}
It won't be [G]long till my ship will be sailing
Back to [A7]Kona
A [D7]grand old place
That's always fair to [B7]see... you're telling me
I'm [E7]just a little Hawaiian and a homesick island boy
I [A7]want to go back to my fish and poi
I want to go [G]back to my little grass shack
In Kealakekua, [A7]Hawaii
Where the [D7]humu-humu nuku-nuku a pua'a
Go swimming [G]by
Where the [D7]humu-humu nuku-nuku a pua'a
Go swimming [G]by
{sot}
A|-----2---2-----|-------3-3---
E|---3---3---3---|-----0-------
C|-2-------------|---0---------
G|---------------|-------------
{eot}
# here's my custom chords:
{define: Gm7b5 frets 0111 fingers 0211}
# alternate "Voicings" (note spaces aren't required, but are recommended)
{define: C-2pos frets 9 7 8 7}
# redefine a common chords
{define: C-alt frets 5 4 3 3 fingers 3 2 1 1}
# any name!
{define: Ice frets 3 1 1 1 fingers 3 1 1 1 add: string 1 fret 1 finger 1}
{define: Cream frets 5 1 2 2 fingers 4 1 3 2}
{define: Pie frets 2 1 1 4 fingers 2 1 1 4 add: string 1 fret 1 finger 1 add: string 4 fret 1 finger 1}
# include fingers to be helpful!
{define: G-alt frets 4 2 3 2 fingers 3 1 2 1 add: string 1 fret 2 finger 1 add: string 3 fret 2 finger 1}
{comment:Intro/Overview}
UkeGeeks "knows" only basic chords (hey, it has more than
160, which is a bunch more than I know), so how do you
teach it new chords?
Easy! Use [Gm7b5]the "define" tag
{comment: Same Chord, Different Voicings}
Sometimes [C]you want to show
[C-2pos]Second postion chord diagrams...
And other times [C-alt]recommend an alternate fingering
{c:...And Did You Know}
You can [Ice]name your [Cream]chords [Pie]anything!
{c:Optional}
[G-alt]You don't have to include the "extra" fingers,
Such as barre chords...
(but it helps)
# Just use an X instead place of a fret number:
{define: D5mute frets 2 2 X X fingers 1 1 2 2}
{define: F5mute frets 5 5 X X fingers 1 1 2 2}
{c:View Song Source}
Sometimes a [D5mute]chord only [F5mute]requires two or three notes.
So we need a notation
That'll allow us to show
Those strings that should played,
And those that should not
</pre>
</section>
</div>
</article>
<footer>
<p>Note: Standard <strong>GCEA</strong> Soprano Ukulele Tuning. <small>Powered by <a href="http://ukegeeks.com/" title="Uke Geeks for free ukulele JavaScript tools">UkeGeeks' Scriptasaurus</a> • ukegeeks.com</small></p>
</footer>
<script src="../dist/song-formatter.bundle.js"></script>
<script type="text/javascript">
(() => {
/**
* Put your code here to change any of UkeGeek's default settings.
*/
const ukeGeeks = window.ukeGeeks;;
/**
* For demo purposes: allows one to turn on/off the inlineDiagrams
* via query string `?inline=true`.
*/
function checkUrlOpts() {
const regEx = /[?&]inline=(1|true|on|yes)/i;
if (regEx.test(`${window.location}`)) {
ukeGeeks.settings.inlineDiagrams = true;
}
}
/**
* Here we've added a call to checkUrlOpts in what's otherwise a
* very "standard" way to run Scriptasaurus.
*/
function run() {
checkUrlOpts();
ukeGeeks.init();
ukeGeeks.run();
}
run();
})();
</script>
</body>
</html>