Ekmelib is a collection of scripts (JavaScript and CSS) which support
the embedding of microtonal music content in Web pages.
It implements two Devices to render music samples:
Player for audio playback and Score for typesetting.
The focus is on:
Microtonality:
Ekmelib is intended primarily for microtonal samples (scales,
intonation exercises etc.)
It provides scripts for the equal-temperament systems
72-EDO (twelfth-tones), 24-EDO (quarter-tones), and 12-EDO (traditional).
Text form:
Music samples are given as tone sequences in text form.
These can be specified inline in documents (in ekmaudio and
ekmscore elements) or in URIs, or entered by the user in a
text input field (see the Edit Window).
Simplicity:
The scripts implement a simple playback and typesetting that work in
modern browsers and that do not require special plugins, separate
audio files, or streaming audio.
The playback is based on the Web Audio API1
and uses one channel.
The typesetting uses the Ekmelos font.
See also the following pages which make use of ekmelib:
Transport buttons for Playback, Stop, Pause / Resume, Hold / Resume,
Previous mark, Next mark, and Repeat (loop).
to open / close the Control Window for the audio settings.
to open / close the Edit Window for the tone sequence.
to show the score; see Player with Score.
This is present only together with the script for the score.
Display of the elapse time and of the total duration.
The bar also shows the duration of the currently played tone.
- / +
to the right to minimize / open the player.
The HTML ekmaudio Element
To embed audio content, i.e. a player in a document, a HTML ekmaudio
element must be inserted. This can be any appropriate HTML element with
the class ekmaudio, e.g.:
The content (FALLBACK_CONTENT) of each ekmaudio element in the document
will be replaced with the actual player which is then initialized with
the specified attributes.
Attributes
The first six attributes – seq, relative, pitch, tempo,
time, supplement – form together the actual tone sequence, i.e.
the value of the seq attribute is completed with preceding
commands corresponding to the other five attributes.
The next four attributes – var, volume, detune, type – are
respected only at the first occurrence in a document (in a player or a
score).
? retrieves the tone sequence from the query part, i.e. from
?… in the URI of the document.
If it consists only of a single variable
this will be loaded automatically; e.g.
http://my.domain/page.htm?%5cmelody
(with the URI escape %5c for \)
loads the variable melody.
relative="NOTE"
The octave mode.
The default is the Absolute octave mode.
See the relative command.
pitch="FREQUENCY"
The concert / root pitch.
The default is 440 Hz.
See the pitch command.
tempo="NOTEVALUE=RATE" tempo="DURATION"
The tempo of note values.
The default is "4=60".
See the tempo command.
time="NUM/DENOM"
The time (meter).
The default is no meter (no barlines).
See the time command.
supplement="NAME …"
Supplemental data for the tones.
This is a space-separated list of names.2
Each designates a set of data that will be added to each tone as
properties.
See the caption attribute for properties and
methods of tones.
NAME is one of:
degreeData related to the respective degree:
partialPartial tone number.
propNum, propDenomNumerator and denominator of the (approximate) proportion.
This applies to tones specified as proportion
or frequency in the tone sequence.
These data are added automatically if the score script is included
in the document.
var="PATH"
The path component of the URI to online available variables,
i.e. to a directory containing files of variables as well as the special
file list.txt. This file must hold the names of the online
variables (not the filenames and without a leading \) as a
space-separated list.2 It is loaded automatically to fill
the select list in the Edit Window.
Note that the origin of the URI
(i.e. protocol, host, and port) cannot be
specified, because it must be the same as that of the document;
e.g. if the current URI is http://my.domain/and/page.htm the file
melody.txt has the URI http://my.domain/PATH/melody.txt.
If this attribute is not present or if PATH is empty, only
local files can be loaded.
volume="LEVEL"
The volume level (master gain value).
The range of LEVEL determines the unit:
0.0 ≤ LEVEL ≤ 1.0 is the actual level (silent thru loudest).
LEVEL > 1.0 is a percent value, i.e. 100 is equivalent to 1.0.
LEVEL < 0.0 is a decibel (dB) value.
The default is 0.5 = 50 % = − 6.0 dB.
detune="CENTS"
The cent value of the detuning. The default is 0.
type="OSCILLATOR"
The oscillator type (waveform).
OSCILLATOR is one of:
sineSine wave (default)
sawtoothSaw-tooth wave
squareSquare wave
triangleTriangle wave
loop
A boolean attribute. If present, the player will, upon reaching the
end of the tone sequence, automatically seek back to the start.
autoplay
A boolean attribute. If present, the player automatically starts playing.
Only the first occurrence of this attribute in a document is respected.
mini
A boolean attribute. If present, the player is minimized.
The value + creates a new score immediately after the
ekmaudio element.
Example 1
This example creates a player for 72-EDO and German note names.3
It requires the following files to be included in the document:
pre/css/ekmplayer.css
pre/js/ekmplayer-72-en-de.js
<div class="ekmaudio"
seq="\gain=0.8 t4 t t t c4 r r8 er4. gir,2 fisir
r4 heser2. r8 cel dir4.~ dir4 cel2 fih4 asil,2
\\
\gain=0.33 \=c'
<fisil c' asel'>1~ q <gir cel esir>
<heser dir fih>1*19/8 <heser dir fih>2.
\\
\gain=0.33 \=c,
<er hesel''>1~ q <er desir''>
<aser eir'>1*19/8 q2."
relative="c''"
tempo="4=80"
volume="30"
type="sawtooth"
var="var"
>
Here is an ekmelib player
</div>
Result in the browser:
Here is an ekmelib player
Score
The score contains the following elements:
to open / close the Style Window for the style settings.
to open / close the Control Window for the audio settings.
They are used when playing a clicked note / chord.
to open / close the Edit Window for the tone sequence.
This is not present if the score is associated
with a player.
to show the score, i.e. to apply the current tone sequence.
This is not present if the score is associated
with a player.
One staff for each voice in the tone sequence.
The staves can be scrolled horizontally if they do not fit inside the
ekmscore element, while the clefs (the staff prefixes) remain
fixed.
Automatic scrolling is performed during the playback of the
associated player.
A bar number above every fourth barline, ignoring barlines set with
the bar command.
Special diamond note heads for tones specified as
proportion or frequency
in the tone sequence. They are placed at the nearest degree.
Clickable notes / chords to play them individually.
A further click while playing stops it (useful in particular if the
duration is set to a continuous tone in the Style Window).
An optional caption (e.g. note name) placed below each note / chord
and a corresponding label placed below the clef.
The HTML ekmscore Element
To embed score content in a document, a HTML ekmscore element must be
inserted. This can be any appropriate HTML element with the class
ekmscore, e.g.:
The content (FALLBACK_CONTENT) of each ekmscore element in the document
will be replaced with the actual score which is then initialized with
the specified attributes.
See these attributes in the ekmaudio element.
They are usually not required in a score if this is
associated with a player.
ledger="LEDGER_LINES"
The maximum number of ledger lines both above and below.
This enlarges the space for each staff.
An ottava bracket is displayed for higher / lower note positions.
The default is 1.
spacing="SPACING"
The minimum spacing between consecutive notes / chords in staff units
(half the staff line distance).
The actual spacing can be larger.
The default is 0, i.e. a proportional spacing (a.k.a. spring).
clef="CLEF …"
The clef types.
This is a space-separated list of names2 –
one for each staff and the last name applies to all further staves.
CLEF is one of:
trebleTreble clef (G)
bassBass clef (F)
altoAlto clef (C)
The default is "treble treble alto bass".
notation="NOTATIONSTYLE"
The notation style designating the set of used accidentals.
NOTATIONSTYLE is one of:
for 12-EDO:
stdStandard notation (default)
sagSagittal notation
for 24-EDO:
arrowArrow notation (default)
sagSagittal notation
goGould notation
stzStein / Zimmermann notation
stcStein / Couper notation
stvtStein / Van Blankenburg / Tartini notation
habaHába notation
fourDigit 4 notation
fernFerneyhough notation
for 72-EDO:
arrowArrow notation (default)
rhmRichter Herf / Maedel notation
simsSims notation
hesseHesse notation
sagSagittal notation
msagMixed Sagittal notation
wysWyschnegradsky notation
bosBosanquet commatic notation
habaHába notation
accidental="ACCIDENTALSTYLE"
The accidental style designating the rules of the notation of
accidentals.4ACCIDENTALSTYLE is one of:
forgetAlways (default).
traditional18th century style (is "default" in LilyPond!).
modern20th century style with extra accidentals.
modern-cautionaryDitto with extra accidentals parenthesized.
neo-modernContemporary style with repeated extra accidentals.
neo-modern-cautionaryDitto with extra accidentals parenthesized.
dodecaphonicAccidental or natural sign on every note.
duration="DURATION"
The playback duration of a clicked note / chord in seconds.
0 sets a continuous tone.
The default is 1.
caption="LABEL|CAPTION|…"
A caption placed below each note / chord and a corresponding label
placed below the clef.
This is a list with any number of label-caption items separated by
a | character. Each item is displayed as preformatted text
in a separate line and enlarges the space below each staff
accordingly.
Both LABEL and CAPTION can be empty.
CAPTION is any JavaScript code (expression or statements),
that will be evaluated for each tone (or for the highest tone of a
chord) and the result will be displayed.
Inside of the code, the name (variable) t can be used to
access the respective tone (an instance of EkmTone).
If the entire code consists of letters only (a-z, A-Z, no spaces)
it is treated as a tone property (e.g. name is equivalent to
t.name).
Some tone properties and methods:
nameNote name.
fFrequency in Hz, or a flag < 0 for rest, tick, or command.
propNum, propDenomNumerator and denominator of the (approximate) proportion.
centExplicitely specified cent value.
valueNote value index 0 - 6.
dotsNumber of augmentation dots.
voiceVoice index 0 - 15.
durDuration in seconds.
lagTime lag.
tieTrue if the tone is tied to the next tone.
degree()Degree 0 - 71 (72-EDO).
proportion()Proportion relative to the small C.
fullScale()Full scale index.
See docs/terms.md and the documentation of EkmTone
in core/js/ekmdata.js for more details.
Example 2
This example creates a score for 72-EDO and German note names.3
It requires the following files to be included in the document:
pre/css/ekmscore-72.css
pre/js/ekmscore-72-en-de.js
and the Ekmelos font, either "Ekmelos 72-EDO" or "Ekmelos",
as WOFF2, WOFF, or OTF, online in a directory fonts,
e.g. http://my.domain/fonts/Ekmelos72edo.woff2, or installed locally.
<div class="ekmscore"
seq="t4 t t t c4 r r8 er4. gir,2 fisir
\time=19/8 r4 heser2. r8 cel dir4.~ dir4 cel2
\time=3/4 fih4 asil,2
\\
\=c' <fisil c' asel'>1~ q <gir cel esir>
<heser dir fih>1*19/8 <heser dir fih>2.
\\
\=c, <er hesel''>1~ q <er desir''>
<aser eir'>1*19/8 q2."
relative="c''"
time="4/4"
clef="treble treble bass"
notation="rhm"
accidental="modern"
>
Here is an ekmelib score
</div>
Result in the browser:
Here is an ekmelib score
Player with Score
A player can be associated with a score for
typesetting its current tone sequence.
This is accomplished
either with the attribute score="SCORE_ID" in the
ekmaudio element, where SCORE_ID must be the ID of
an existing ekmscore element anywhere in the document;
or with the attribute score="+" in the ekmaudio element;
or with a click on
in the player if this is not yet associated with a score.
B and C create a new score, i.e. a new ekmscore element immediately after
the ekmaudio element and pass the following attributes from the ekmaudio
element to the score:
ledger
spacing
clef
notation
accidental
duration
caption
A player can have only one associated score. But a score can be
associated with any number of players in the same document.
It always shows the tone sequence of that associated player for which
or
last has been clicked.
Example 3
This example creates a player and a score which are associated through
the ID "show".
Here, the ekmscore element is placed after the ekmaudio element with a
text in between, but it can be anywhere in the document.3
It requires the following files to be included in the document:
pre/css/ekmcomb-72.css
pre/js/ekmcomb-72-en-de.js
and the Ekmelos font, either "Ekmelos 72-EDO" or "Ekmelos",
as WOFF2, WOFF, or OTF, online in a directory fonts,
e.g. http://my.domain/fonts/Ekmelos72edo.woff2, or installed locally.
<div class="ekmaudio"
seq="\gain=0.8 t4 t t t c4 r r8 er4. gir,2 fisir
\time=19/8 r4 heser2. r8 cel dir4.~ dir4 cel2
\time=3/4 fih4 asil,2
\\
\gain=0.33 \=c'
<fisil c' asel'>1~ q <gir cel esir>
<heser dir fih>1*19/8 <heser dir fih>2.
\\
\gain=0.33 \=c,
<er hesel''>1~ q <er desir''>
<aser eir'>1*19/8 q2."
relative="c''"
tempo="4=80"
time="4/4"
volume="30"
type="sawtooth"
var="var"
score="show"
>
Here is an ekmelib player
</div>
Click on a note or chord to play it:
<div class="ekmscore"
id="show"
clef="treble treble bass"
notation="rhm"
accidental="modern"
>
Here is an ekmelib score
</div>
Result in the browser:
Here is an ekmelib player
Click on a note or chord to play it:
Here is an ekmelib score
Example 4
This example creates a player and automatically an associated score
by means of the special attribute value score="+".
The tone sequence is a longer version of the above examples.3
It requires the same files as in Example 3 to be included in the document:
pre/css/ekmcomb-72.css
pre/js/ekmcomb-72-en-de.js
and the Ekmelos font, either "Ekmelos 72-EDO" or "Ekmelos",
as WOFF2, WOFF, or OTF, online in a directory fonts,
e.g. http://my.domain/fonts/Ekmelos72edo.woff2, or installed locally.
<div class="ekmaudio"
seq="\gain=0.8 t4 t t t c4 r r8 er4. gir,2 fisir
\time=19/8 r4 heser2. r8 cel dir4.~ dir4 cel2
\time=3/4 fih4 asil,2
\time=29/8 r4 deseh2 r4 eser2 eir8 deseh4. aser8 r
r4 aser8 heser4 cel2 her4
\time=6/4 r4 eser,2 r4 desil2
gir4 r r2 fisir4 r8 cel'8
\time=4/4 d4 asel'2.
\time=6/4 r2 heser,4. cel dir8 cel
\time=3/4 fih4 asil, heser8 cel
r4 eir,8 fih eir ger
\time=6/4 r4 deseh'2 r8 eser2 eir8
deseh4 aser r heser r r8 cel
her4 eser,2 r4 desil4 r8. desil16
\time=4/4 ces1
\\
\gain=0.33 \=c'
<fisil c' asel'>1~ q <gir cel esir>
<heser dir fih>1*19/8
<heser dir fih>4 asil'8 fih asil fih
<aser, deseh eir>1*29/8
R1.
<gir cel esir>1.
<fisil c' asel'>1
<heser dir fih>1*6/4
<eir, heser' dir fih>8 <ger cil>
<eir heser' asil'> <ger cil fih>
<eir heser' fih'> <ger cil>
<eir heser' asil'>4 <eir heser' fih'>2
<aser deseh eir>1*6/4~ q~ q
<ces, fil heser>4 fil heser2
\\
\gain=0.33 \=c,
<er hesel''>1~ q <er desir''>
<aser eir'>1*19/8
q2.
<eser desil''>1*29/8
eser1.
<er desir''>1.
<er hesel''>1
<aser eir'>1*6/4
<aser dir'>2.~ q
<eser desil''>1*6/4~ q~ q
R1"
relative="c''"
tempo="4=80"
time="4/4"
volume="30"
type="sawtooth"
var="var"
clef="treble treble bass"
notation="rhm"
accidental="modern"
score="+"
>
Here is an ekmelib player with score
</div>
Result in the browser:
Here is an ekmelib player with score
Window Types
These windows are used to enter / select parameters for
Player and/or Score.
A window of a particular type is shared by all devices in the document,
i.e. it can be open only for one device at the same time.
Edit Window
Window to enter tone sequences and to maintain variables.
It contains the following elements:
to load a variable from a local file.
This can also be accomplished by drag and drop into the text input field.
The variable will be inserted with \ into the tone sequence.
to save the tone sequence from the text input field
in a local file (for use as a variable).
to expand all loaded variables in the tone sequence.
A select list with all loaded and optionally all online available
variables.
A selected variable will be inserted with \ into the tone sequence.
This list is shared by all devices in the same document.
A select list with the error messages
for the tone sequence or “-- OK --”.
When selecting a message, the cursor in the text input field jumps
to the position where the error occurred.
A text input field for the tone sequence.
Changes in the text have no immediate effect.
The tone sequence will be applied not until
or
is clicked.
If it has errors the edit window is opened for the concerning device,
with the error messages in the select list.
Control Window
Window for the audio settings.
These are shared by all devices in the document.
Volume (master gain value): The display of the volume level is
likewise a button to toggle between percent (%) and decibel (dB).
Detuning: The display of the cent value is likewise a button to
reset the detuning to zero.
Oscillator type (waveform):
sine
sawtooth
square
triangle
Style Window
Window for the style settings of a score.
These apply to all staves, except for the clef type.
Clef type:
See the clef attribute in the ekmscore element.
For two or more staves, i.e. for a tone sequence with two or more
voices, a button is shown next to the select list
to toggle the staff for which to select the clef.
Notation style:
See the notation attribute in the ekmscore element.
Accidental style:4
See the accidental attribute in the ekmscore element.
Playback duration of a clicked note / chord:
1 thru 4 seconds or continuous tone.
See the duration attribute in the ekmscore element.
↑The Web Audio API is a high-level Web (JavaScript) API for processing
and synthesizing audio in web applications.
See the W3C specification at www.w3.org/TR/webaudio.
↑abcIn a space-separated list, any Unicode white-space character can
be used as separator: Space, Tab, Line Feed et al according to the
JavaScript character class \s
(= [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]).
However as per HTML 5, in a “set of space-separated tokens” of an
attribute only Space, Tab, Line Feed (LF), Form Feed (FF), and
Carriage Return (CR) are allowed.
↑abcdThe tone sequence is an adapted version of the Intonation exercise for soprano
for “Welle der Nacht”, op. 2 by Franz Richter Herf.
The scores with all exercises are available for download.
They include links to the Ekmelic Player, each with one tone sequence.
↑abThe notion of the Accidental style and the names are adopted from
LilyPond, except for "default" because "always (forget)" is
a more suitable style for the typical usage of ekmelib with microtonal
scales and intonation exercises.