Christoph Reuter: VexFlow und VexTab

VexFlow und VexTab

VexFlow ist eine API, mit deren Hilfe man innerhalb eines HTML5-Canvas auf der Grundlage von Javascript im Browser Noten schreiben kann. Um relativ einfach und musiker-kompatibel Noten in html zu schreiben, wurde das VexTab-Format entwickelt.

Beispiele:

Hierfür muss man unter https://github.com/0xfe/vextab das VexTab-Paket downloaden, es in den gleichen Ordner wie die HTML-Datei entpacken und dann im Header der Datei folgende Scripte einbinden:

Sobald dies geschehen ist, können innerhalb eines <div>-Tags verschienste Arten von Noten geschrieben werden. z.B. würde eine C-Dur-Tonleiter über zwei Oktaven folgendermaßen aussehen:

tabstave notation=true tablature=false time=4/4 clef=treble key=C
notes C-D-E-F/4 | G-A-B/4-C/5 | C-D-E-F/5 | G-A-B/5-C/6

</div>

tabstave notation=true tablature=false time=4/4 clef=treble key=C notes C-D-E-F/4 | G-A-B/4-C/5 | C-D-E-F/5 | G-A-B/5-C/6

Mit tabstave wird eingeleitet, dass jetzt eine Notenzeile folgt, mit den folgenden Eigenschaften:

notation=true -> es wird auf Notenlinien geschrieben
tablature=false-> es wird nicht auf Gitarren-Tabulatur geschrieben
time=4/4-> es ist im Viervierteltakt (auch jede andere Taktart möglich, 4/4 auch als C ( C ) sowie als alla breve ( C| )).
clef=treble -> Notenschlüssel wird gesetzt (treble, alto, tenor, bass, percussion)
key=C -> Tonart wird gesetzt (C, Am, F, Dm, Bb, Gm, Eb, Cm, Ab, Fm, Db, Bbm, Gb, Ebm, Cb, Abm, G, Em, D, Bm, A, F#m, E, C#m, B, G#m, F#, D#m, C#, A#m)

In der darauffolgenden Zeile werden nach notes die Noten definiert, mit folgenden Regeln:

1. Notennamen: C, D, E, F, G, A, B sowie ## (mit einer Zahl dazwischen) für Pause

tabstave notation=true tablature=false time=4/4 clef=treble key=C notes C/4 ## E-F/4 | ## A-B/4-C/5 | C/5 :8 ## :4 E/5 :8 ## :4 F/5 | G-A/5 :h ##

2. Vorzeichen: # = Kreuzchen, ##= Doppelkreuzchen @ = Bechen, @@= Doppelbechen, n = Auflösung

tabstave notation=true tablature=false time=4/4 clef=treble key=C notes C/4 ## E-F#/4 | ## A-B@/4-C/5 | C##/5 :8 ## :4 E@@/5 :8 ## :4 Fn/5 | G-A/5 :h ##

3. Oktavlage:

Kontraoktave: C/1, D/1, E/1, F/1, G/1, A/1, B/1
große Oktave: C/2, D/2, E/2, F/2, G/2, A/2, B/2
kleine Oktave: C/3, D/3, E/3, F/3, G/3, A/3, B/3
eingestrichene Oktave: C/4, D/4, E/4, F/4, G/4, A/4, B/4
zweigestrichene Oktave: C/5, D/5, E/5, F/5, G/5, A/5, B/5
dreigestrichene Oktave: C/6, D/6, E/6, F/6, G/6, A/6, B/6
viergestrichene Oktave: C/7, D/7, E/7, F/7, G/7, A/7, B/7

tabstave notation=true tablature=false time=4/4 clef=bass key=C notes C/2 ## E-F#/2 | ## A-B@/3-C/4 | tabstave notation=true tablature=false time=4/4 clef=treble key=C notes C##/4 :8 ## :4 E@@/5 :8 ## :4 Fn/6 | G-A/6 :h ##

4. Notenlänge: :w = ganze Note, :h = halbe Note, :q = Viertelnote, :8 = Achtelnote, :16 = Sechzehntelnote, :32 = Zweiundreißigstelnote etc.

Als Default sind Viertel (:q) eingestellt, wenn man die Notenlängen ändern will, schreibt man einen : mit der entsprechenden Längenbezeichnung für alle nachfolgenden Noten.

b = Bindebogen zur nächsten Note, d = punktierte Note (z.b. :8d = punktierte Achtel),
:8 C-D-E/3 ^3^ = Triole (hier über das kleine c, d und e in Achtel)
:16 C-D-E-F/3 ^4^= Quadrole (hier über das kleine c, d, e und f in Sechzehntel).

Wenn man ein S hinzufügt, dann werden alle nachfolgenden Noten als Rhythmusnoten angezeigt (z.B. :8S = Achtel als Ryhtmusnote)

Wenn man ein X anstelle eines Notennamens einfügt, wird die Note als stumme Note ausgegeben (Z.B. X/4 = stumme Note in der viergestrichenen Oktave)

tabstave notation=true tablature=false time=4/4 clef=treble key=C notes :8 C/4 ## :qd E/4 F/4 | :q ## :h A/4 :qd B/4 :8 C/5 | :q C/5 E/5 :8 C-E-F/5 ^3^ | :w G/5 | A/5 |:h ## tabstave notation=true tablature=false time=4/4 clef=treble key=C notes X/4 :8 ## :q X/4 :8 ## :4 X/6 | X-X/6 :h ## tabstave notation=true tablature=false time=4/4 clef=percussion notes :4S B/4 :8 ## :qS B/4 :8 ## :4S B/4 | :4S B/4 B/4 :h ##

5. Taktstriche werden durch | markiert, weitere Markierungen sind:

=|| Doppelstrich
=|: Wiederholungszeichen links
=:| Wiederholungszeichen rechts
=:: Wiederholungszeichen links und rechts
=|= Taktende.

tabstave notation=true tablature=false time=4/4 clef=treble key=C notes :8 C/4 ## :qd E/4 F/4 =:: :q ## :h A/4 :qd B/4 :8 C/5 | :q C/5 E/5 :8 C-E-F/5 ^3^ =:| :w G/5 | A/5 =|| :h ## =|=

6. über Klammern ( ) lassen sich einzelne Noten (mit Punkten . verbunden) zu Akkorden zusammenfassen, z.B. (C/4.E/4.G/4) ergibt einen C-Dur-Akkord in der eingestrichenen Oktave

tabstave notation=true tablature=false time=4/4 clef=treble key=C notes :8 (C/4.E/4.G/4.C/5) ## :qd E/4 (F/4.A/4.C/5) =:: :q ## :h (E/4.A/4.C/5) :qd (G/4.B/4) :8 (E/4.G/4.C/5) | :q C/5 E/5 :8 C-E-F/5 ^3^ =:| :w (G/4.B/4.D/5.F#/5.G/5) | (E/4.A/4.C/5.E/5.A/5) =|| :h ## =|=

7. Artikulation: wenn man hinter die Note verschieden Buchstaben hinzufügt, kann man die Artikulation bestimmen:

u = Aufstrich (upstroke, z.B. Cu/4 = Aufstrich auf dem eingestrichenen C)
d= Abstrich (downstroke, z.B. Cd/4 = Abstrich auf dem eingestrichenen C)
v = Vibrato (z.B. Cv/4 = Vibrato auf dem eingestrichenen C)

Über $.ariculation/position.$ können weitere Artikulationsarten hinzugefügt werden:

$.a./bottom.$ = Staccato (z.B. C/4 $.a./bottom.$ = Staccato auf dem eingestrichenen C mit dem Punkt unter der Note)
$.av/bottom.$ = Staccatissimo (z.B. C/4 $.av/bottom.$ = Staccatissimo auf dem eingestrichenen C mit dem Zeichen unter der Note)
$.a>/bottom.$ = Akzent (z.B. C/4 $.a>/bottom.$ = Akzent auf dem eingestrichenen C mit dem Zeichen unter der Note)
$.a-/bottom.$ = Tenuto (z.B. C/4 $.a-/bottom.$ = Tenuto auf dem eingestrichenen C mit dem Zeichen unter der Note)
$.ah/bottom.$ = Flageolet (z.B. C/4 $.ah/bottom.$ = Flageolet auf dem eingestrichenen C mit dem Zeichen unter der Note)
$.a@u/bottom.$ = Fermate (nach unten gebogen)(z.B. C/5 $.a@u/bottom.$ = Fermate auf dem zweigestrichenen C mit dem Zeichen unter der Note)
$.a@a/top.$ = Fermate (nach oben gebogen)(z.B. C/4 $.a@a/top.$ = Fermate auf dem eingestrichenen C mit dem Zeichen über der Note)
$.a^/top.$ = Marcato (z.B. C/5 $.a^/top.$ = Marcato auf dem zweigestrichenen C mit dem Zeichen über der Note)
$.a+/top.$ = Pizzicato (z.B. C/5 $.a+/top.$ = Pizzicato auf dem zweigestrichenen C mit dem Zeichen über der Note)
$.ao/top.$ = Bartok-Pizzicato (z.B. C/5 $.ao/top.$ = Bartok-Pizzicato auf dem zweigestrichenen C mit dem Zeichen über der Note)
$.a|/top.$ = Aufstrich (z.B. C/5 $.a|/bottom.$ = Aufstrichauf dem zweigestrichenen C mit dem Zeichen über der Note)
$.am/top.$ = Abstrich (z.B. C/5 $.am/top.$ = Aufstrichauf dem zweigestrichenen C mit dem Zeichen über der Note)

tabstave notation=true tablature=false time=4/4 clef=treble key=C notes Cu-Dd-E/4 $.a./bottom.$ -F/4 $.a./top.$ | G/4 $.av/bottom.$ A/4 $.a>/bottom.$ B/4 $.a@a/top.$ C/5 $.a@u/bottom.$ | C/5 $.a-/top.$ D/5 $.ah/top.$ E/5 $.a^/top.$ F/5 $.a+/top.$ | G/5 $.ao/top.$ A/5 $.a|/top.$ B/ 5$.am/top.$ Cv/6

8. Text: Text kann mit Hilfe von $-Zeichen direkt notengetreu platziert werden (für Liedtexte, Akkordbezeichnungen etc.). Mit Hilfe von $.top.$ und $.bottom.$ kann der Text entweder über oder unter die entsprechende Note platziert werden (z.B. C-D-E-F/4 $.top.$ $Dies,ist,ein,Text$ ).

Mit Hilfe von .style.-Eigenschaften lassen sich dem Text auch bestimmte Eigenschaften (z.B. big, medium, italic) zuweisen (z.B. C-D-E-F/4 $.top.$ $.big.Dies,ist,ein,Text$ ). Diese können auch nach dem Stil .face-size-style. sehr komplex sein (z.B. C-D-E-F/4 $.top.$ $.Times-12-bold.Dies,ist,ein,Text$ ).

Über text lässt sich eine Textzeile hinzufügen, deren Textelemente (mit Beistrichen getrennt) sich auf Notenlängen verteilen lassen (z.B. text :h, 1. Teil, 2. Teil) setzt die beiden Wortteile in Abständen von halben Noten.
Über Taktstriche ( | ) lassen sich die Wortteile auch Takten zuordnen (z.B. text :h, 1. Teil, 2. Teil, | 3. Teil, 4. Teil).
Über den Zusatz einer Nummer zwischen 0 und 10 kann die Textangabe vertikal verschoben werden (.0 = ganz oben, .10 = ganz unten).(z.B. text :h,.1, 1. Teil, 2. Teil, | .10, 3. Teil, 4. Teil).

Mit # lassen sich im Textmodus verschiedene Musikzeichen erzeugen, z.B.
text #coda = Coda-Zeichen
text #tr = Triller-zeichen
text #segno = dal-segno-Zeichen
text #f = forte
text #p = piano

options space=20 font-size=12 tabstave notation=true tablature=false time=4/4 clef=treble key=C notes C-D-E-F/4 $.top.$ $.italic.Dies,ist,ein,Text$ | G-A-B/4-C/5 $.bottom.$ $.Times-14-bold.und,noch,ein,Text$ | text :h,C Major, C Major text :h,G Major, G Major text ++, .13, :w, Neue Textzeile unter den gleichen Notenlinien. text ++, .4, |#coda, :h, , :q, #tr, |#segno text ++, .10, |,#f,#p text ++, .13 |, :w, ,|, :h, ,D.S. al coda options space=25

9. mit options lassen sich zu Beginn des div-Tags die verschiedenen Einstellungen vornehmen:

width = Weite der Notenzeilen
scale = Größe der Noten (default: 1.0)
space = Abstand zur nächsten Notenzeile (in Pixeln)
stave-distance = Abstand der Noten mit Hilfslinien zur nächsten Notenzeile (in Pixeln)
font-face/font-style/font-size = Einstellung für Schriftart, -stil und -größe
player = schaltet einen kleinen MIDI-Player hinzu (true/false; noch in Entwicklung)

options width=500 scale=1.5 font-face=Times font-style=italic font-size=5 tabstave notation=true tablature=false time=4/4 clef=treble key=C notes C-D-E-F/4 | G-A-B/4-C/5 | C-D-E-F/5 | G-A-B/5-C/6 text :h,C Major, C Major text :h,G Major, G Major

Unter http://www.vexflow.com/vextab/tutorial.html gibt es auch ein interaktives Tutorial zu VexTab

music21, trinket.io/music

Um einfache Notenbeispiele in HTML zu erzeugen, reicht es, folgendes Script an einem beliebigen Ort der Seite zu platzieren:

Und dann in einem <div>-Tag in tinyNotation die gewünschten Noten einzugeben.

Der div-Tag lautet:

Hierfür gibt es folgende Regeln:

1. Notennamen: c, d, e, f, g, a, b sowie r (= rest) für Pause

2. Vorzeichen: # = Kreuzchen, - = Bechen, n = Auflösung

3. Oktavlage:
(!!Achtung Bug: Die Oktavlage ist in tinyNotation um eine Oktave verschoben!!)

Kontraoktave: CCC, DDD, EEE, FFF, GGG, AAA, BBB
große Oktave: CC, DD, EE, FF, GG, AA, BB
kleine Oktave: C, D, E, F, G, A, B
eingestrichene Oktave: c, d, e, f, g, a, b
zweigestrichene Oktave: c', d', e', f', g', a', b'
dreigestrichene Oktave: c'', d'', e'', f'', g'', a'', b''
viergestrichene Oktave: c''', d''', e''', f''', g''', a''', b'''

4. Notenlänge: 1 = ganze Note, 2 = halbe Note, 4 = Viertelnote, 8 = Achtelnote, 16 = Sechzehntelnote, 32 = Zweiundreißigstelnote etc.
Die Länge wird hinter die Notenbezeichnung geschrieben und gilt für alle folgende Noten, bis eine andere Länge eingegeben wird.

~ = Bindebogen zur nächsten Note, . = punktierte Note,
trip {c8 d e} = Triole (hier über das kleine c, d und e in Achtel)
quad{c16 d e f} = Quadrole (hier über das kleine c, d, e und f in Sechzehntel).

5. Das Metrum wird immer am Anfang eingegeben (z.B. 4/4 für Vier-Viertel-Takt), kann aber auch später im Takt verändert werden.

Eine C-Dur-Tonleiter in der eingestrichenen Oktave würde folgendermaßen beschrieben werden:

4/4 c d e f g a b c'

Eine chromatische Skala in Achteln und in der kleinen Oktave würde wie folgt aussehen:

4/4 C8 C# D D# E F F# G G# A B- Bn c2

Diese Regeln gelten auch für https://www.trinket.io/music , um schnell Notenbeispiele zu erzeugen, sich anzuhören und zu verschicken, zu verlinken oder via iframe einzubetten:

Komplexeres Beispiel:

3/4 E4 r f# g trip{b-8 a g} c4~ c

Weitere browserbasierte Noten-Generierungs-Scripte sind ABC notation (mit Hilfe des Scripts abc2svg) und MusicXML.