New Hampshire Country Dance Fiddle Tunes Website
Playable Tunes in Standard Notation
The Complete Tune Collection in Playable Form
This section contains all the tunes in standard notation. Clicking on a tune results in the tune being played for you, complete with a very basic accompaniment. Click on a note to start playback, and click on white space to stop playback.
To go to the different pages of this section, please use the Tunes by Type menu at the top of this window.
About the Playable Tunes
The playable tune pages look like ordinary pages of tunes in standard notation. But if you click on one of the tunes it plays back for you. The playback even includes a basic accompaniment. The method for setting this up is rather interesting so I am presenting an explanation of how it's done with an example. There are other ways of achieving a similar result, but this one is quite flexible and relatively easy to achieve.
For more information about abc notation, go to the Introduction to abc Notation page on this website.
For more information about how to make a web page with playable tunes, keep reading, but also check out Jean-François Moine's abc2svg Documentation page.
Important Note: Playable tunes are best viewed on a computer. They don't resize on smaller screens, and they may produce unpredictable results. On an iPhone or iPad you're likely to see the tune but it won't play. On an Android tablet results can range from just getting an error message to seeing the tune and having buggy playback.
Some Background
As with all the tunes on this website, they are based on abc notation. If you find that any of the concepts here don't make sense, go to the Intro to abc Notation on this website to learn. Generally abc notation uses abc reader software such as EasyABC to display the tunes on the screen, play them back and print them. But software like EasyABC relies on various helper apps to achieve these goals. EasyABC relies on abc2midi to play the tunes, and to abcm2ps to print the tunes.
In fact those two apps and a couple others are built right into EasyABC on a Mac. (I don't know how Windows computers work so I can't address that.) If you're curious, here's how you can verify that for yourself. Find the EasyABC app in the Applications folder on a Mac. Hold down the Control key and click on its icon. From the menu that appears, choose Show Package Contents. You've just opened up EasyABC and are looking at its contents. Be careful not to move or change anything. Double click on the Contents folder, then open the Resources folder inside it, and the bin folder inside there. You'll see five applications there, including the ones I mentioned. When you've satisfied your curiosity close everything up.
The abcm2ps program was written by Jean-François Moine and is based on Postscript. It's the basis for high-quality printing in most abc software. Jean-François has since written another program called abc2svg. It's based on svg graphics instead. I don't know much about the svg format, but it apparently makes it possible to do many things that are either difficult or impractical with Postscript.
How Playable Tunes Work
- In the next tab I include an example with explanation; you might find it useful to refer to as you go along.
Once the abc code is written there are a few possibilities and a few necessities. The abc code is put inside an HTML document, so the final result takes the form of a web page.
Tunes are put inside regions that begin and end with the following code:
<script type="text/vnd.abc"> abc code here </script>
This basically tells the HTML interpreter (e.g. your web browser) that what falls in this region of the page is abc code. It doesn't tell the browser how to interpret the code though. To do that you have to insert the following lines into the head portion of your HTML document:
<script src="http://moinejf.free.fr/js/abcweb-1.js"></script> <script src="http://moinejf.free.fr/js/snd-1.js"></script>
The first of the lines loads the abc2svg code and interprets the abc code, replacing it with SVG images that you can ultimately print out. The second line loads the sound script which allows you to play the tune by clicking on it. Important note: If you're working with a secure website (https://) you may not be able to load a script from a nonsecure site (http://). In that case you'll have to download the scripts and put them on your server. From the URLs in the scripts, the files are named abcweb-1 and snd-1; the part before that is the address of the page where they can be found.
Before leaving the HTML head, there's one line of text that has to go in the style section of the web page:
svg { display: block }
You can also include abc parameters inside the abc portion of your HTML page. For example, if a tune takes up too much space to fit on a single page, you could try %%pagescale 0.9, which would scale the entire page to 90% size.
One of my favorite aspects to using abc code in this fashion is that you can define styles in the HTML portion of the document and then use them in the abc portion. So, for example, in the style section you might define the following styles:
.text-lg {
font-family:minion-pro-subhead !important;
font-weight:400 !important;
font-size:20px !important;
}
.text-sm {
font-family:minion-pro-subhead !important;
font-weight:400 !important;
font-size:18px !important;
}
(I'm not sure how critical it is to label everything as important, but Jean-François told me to do it in a similar case so I've just kept it up every time I set a style in HTML and use it with abc code.)
Then inside the abc portion you could include a document file header with the following parameter definitions:
%%annotationfont * * class=text-sm % For annotations within the staff %%textfont * * class=text-sm % For lines of text %%infofont * * class=text-lg % For info fields (e.g. T:, C:, I:)
This gives you much more flexibility than you'd get defining everything in abc code.
In the next tab we look at an example that uses all the concepts in this section. Hopefully that will make it all fit together reasonably clearly.
An Example
In this section I'll include an example of how this is done, with explanations as we go along. We'll start with the opening of an HTML page. In the head section we'll include links to the scripts needed. In the style section I'll include a few font styles for use in the abc document.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://use.typekit.net/[code].css">
<script src="http://moinejf.free.fr/js/abcweb-1.js"></script>
<script src="http://moinejf.free.fr/js/snd-1.js"></script>
<style>
/* This is a comment; nothing in here is treated as code. */
/* Here I'll define a few font styles for use in the abc document and also for use in some text in between tunes. */
/* List Styles: In the actual code I set up some complex list styles because I set up the
text between tunes as lists. I'll try to avoid that here. */
/* abc Text Styles: These are styles for use with the abc code, although some were used
between tunes as well. */
.title {
font-family:brioso-pro-display !important;
font-size:30px !important;
font-weight:600 !important;
}
.subtitle {
font-family:brioso-pro-subhead !important;
font-size:20px !important;
font-weight:500 !important;
font-style:italic !important;
line-height: 1.2 !important;
}
.text-lg {
font-family:minion-pro-subhead !important;
font-weight:400 !important;
font-size:20px !important;
}
.text-sm {
font-family:minion-pro-subhead, "Times New Roman", Times, serif !important;
font-weight:400 !important;
font-size:18px !important;
}
.text-bold {
font-family:minion-pro-subhead, "Times New Roman", Times, serif !important;
font-weight:600 !important;
font-size:18px !important;
}
svg {display:block} /* Makes the svg graphics behave as desired */
</style>
</head>
<body>
<noscript>Please activate Javascript!</noscript> /* Lets you know if Javascript is missing. */
<script type="text/vnd.abc">
% This lets us know we're now getting into abc code. Here a "%" begins a comment.
% Here we have a partial abc header file; I left out some to keep it less complex.
If you want to see the full header, go to the Header page of this website.
%abc-2.2
I:abc-charset utf-8
% Here's how to use HTML font styles in the abc document.
%%titlefont * * class=title
%%subtitlefont * * class=subtitle
%%composerfont * * class=subtitle
%%tempofont * * class=text-sm
%%gchordfont * * class=text-bold
%%annotationfont * * class=text-sm % For annotations within the staff
%%textfont * * class=text-sm % For lines of text
%%infofont * * class=text-lg % For info fields (e.g. T:, C:, I:)
%%setfont-1 Bold % Allows changing font within a
%%setfont-2 Italic % string. $1, $2 to change, $0 to
%%setfont-3 * * class=red-text % change back to the default
%%setfont-4 Courier 16
%%staffsep 50 % Separation between staffs
%%maxstaffsep 50 % (minimum, maximum space allowed)
%%MIDI program 74 % Sets the instruments. GM Flute for the melody
%%MIDI chordprog 1 % GM Acoustic Grand Piano for accompaniment
%%MIDI gchordon % turns on accompaniment
X:405061
%%pagescale .95
T:Acadian Reel
S:The melody is transcribed from the fiddling of Doug Protsik, recorded at Maine
S:Fiddle Camp, Aug.7, 2009. I also include a more basic version of the melody elsewhere.
H:All eighth note rests apply to all players.
N:From the Lamprey River Band Tunebook, on NH Country Dance (URL below), along with many New England,
N:Canadian & Swedish tunes, and resources for abc notation and New England traditional music and dance.
%
N: Note #1: To preserve formatting (font, spacing, etc.), use the
N: file header at the URL below; just follow accompanying instructions.
%
N: Note #2: This abc code is optimized for use with abcm2ps, which is used by
N: EasyABC and other abc apps. To use abc2svg for display or printing look to see if there
N: is a file optimized for abc2svg. If not you may need to adjust the spacing in places.
%
Z:abc-transcription Peter Yarensky. I rely heavily on careful listening to the
Z:named sources aided by software to hear details. While not perfect, known
Z:substantial differences from other written sources receive careful attention.
Z:abc-copyright Peter Yarensky. You may reproduce this tune freely but
Z:please include the entire abc file including all the notes.
F:Tunes Home Page - https://fiddle-tunes.nhcountrydance.com/
F:abc Header & its Usage - https://fiddle-tunes.nhcountrydance.com/header-page/
M:2/4
L:1/8
R:Reel
G:Reels ~ Canadian ~ Quebec ~ LRB
N: Tune Tags ~ Reel, Canadian, Quebec, LRB
K:D
%%text $2As played by Doug Protsik$0
%%
A>B |\
"D" AG FA | "D" d>e dd/e/ | "D" ((3f/g/f/)e dc | "D" dd/d/ df/g/ |\
"D" ag ((3f/g/f/)d | "A" ee/f/ e((3e/f/g/) | "A" ag ((3f/g/f/)e | "D" fz A>B |
"D" AG FA | "D" d>e dd/e/ | "D" ((3f/g/f/)e dc | "D" dd/d/ df/g/ |\
"D" ag ((3f/g/f/)d | "A" ee/f/ e((3e/f/g/) | "A" ag ((3f/g/f/)e | "D" dz ||
gf |\
"G" e>B BB | "G" [eB]e ((3f/g/f/)e | "D" dB/2d/2 AA | "D" Af gf |\
"G" e>B BB | "G" [eB]e ((3f/g/f/)e | "D" dA/2B/2 AA | "D" Ad ed |
"A" ca Bc | "D" dz gf |\
"G" e>B BB | "G" [eB]e ((3f/g/f/)e | "D" dB/2d/2 AA | "D" Ad ed |\
"A" ca Bc | "D" dz |]
%%vskip 25
% With the end of the script below we get out of abc code and back to HTML
% code. I put my comments about the tune (history, source, other information)
% between tunes because I could format it more easily. For example text
% wrap was automatic so I didn't have to guess where to end lines. I
% wrote it out as unordered lists which let me arrange "Source/Origin" and
% "Tune Notes" as is usually done by abc; see one of the Playable Tunes
% pages for examples.
</script>
<br>
<p class="text-small"><i>Source/Origin:</i> The melody is transcribed from the fiddling of Doug Protsik, recorded at Maine Fiddle Camp, Aug.7, 2009. I also include a more basic version of the melody elsewhere.</p>
<p class="text-small"><i>Tune Notes:</i> All eighth note rests apply to all players.</p>
</body>
</html>
Menu Guide
with the Tune Index.
are in standard
notation; click on them
to play them.
has NHCD
Tune Book, Chord Book,
and lots of
tune downloads.
Intro: for using
abc tunes; Technical:
writing out tunes.
Various fiddling
& tune learning
topics.