Skip to main content

Grace notes, tuplets, and ornaments

Grace notes, tuplets, and ornaments carry the small performance details that give a passage its character. alphaTab renders each with the engraving conventions its readers expect.

Grace notesโ€‹

Grace notes are the small noteheads that lead into a principal beat โ€” the flick of an appoggiatura or acciaccatura that gives a melody its lift. alphaTab honours the source file's on-beat vs before-beat placement and draws the acciaccatura slash where appropriate.

Tupletsโ€‹

Tuplets โ€” triplets, quintuplets, and other non-standard beat subdivisions โ€” appear whenever a passage subdivides a beat outside the meter, from a shuffle triplet to a Chopin quintuplet run. alphaTab renders each with a bracket and ratio label above the beamed group; beat-connected tuplets share a single bracket span.

Trillsโ€‹

Trills โ€” the fast alternation between the written note and the pitch above, common on baroque violin lines and lead-guitar sustains โ€” render with a tr glyph, and, when the trill spans multiple beats, a wavy line above the staff indicating the duration.

Mordents and turnsโ€‹

Mordents and turns are the traditional ornamental figures that decorate a melodic note โ€” a mordent taps the neighbour note once, a turn wraps around the note with its upper and lower neighbours. alphaTab renders upper mordents, lower mordents, and turns as their standard glyphs above the notehead. The example below uses alphaTex to isolate each ornament type.

Fingering annotationsโ€‹

Fingering marks tell the player which finger to use โ€” the small digits above classical-guitar and piano parts and the picking-hand letters (p, i, m, a) on fingerstyle scores. alphaTab renders left-hand and picking-hand fingering as small digits or letters next to the affected notehead.

Show it in codeโ€‹

Trills and ornaments share the EffectNoteOrnament key; fingering has its own. Toggle any of them off for a cleaner rendering:

import * as alphaTab from '@coderline/alphatab';

const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, {
core: { file: '/scores/song.gp' },
notation: {
elements: new Map([
[alphaTab.NotationElement.EffectTrill, false],
[alphaTab.NotationElement.EffectNoteOrnament, false],
[alphaTab.NotationElement.EffectFingering, false],
]),
},
});

getAlphaTabContainer() is a placeholder for the platform-specific render target โ€” a <div> on Web, an AlphaTab control on .NET, or an AlphaTabView on Android.

Where to look nextโ€‹