Curly braces are omitted in the examples below to prevent rendering issues. Please include them in your actual usage.
Basic Usage
< music >
X:1
T:Rondo in Blue Beard. RH.376
R:Rondeau
S:Rev.R.Harrison's MS,c1815,Cumbria
N:There was an unnecessary quaver rest at the end. PJH.
O:England
A:North-West - Temple Sowerby
Z:vmp.Simon Wilson. Review PJH, 2008.
M:2/4
L:1/8
Q:1/4=100
B:Village Music project, Harrison, Rev. R.
K:A minor
E|Ae ed|d/c/B/c/ AA|Bc de|d/c/B/c/ AE|!
Ae ed|d/c/B/c/ AA|Bc de|Ac Az|!
e2 za|e2 za|ed cB|Aa ae|!
ae' e'd'|d'/c'/b/c'/ aa|bc' d'e'|d'/c'/b/c'/ aa|!
Ae ed|d/c/B/c/ AA|ed cB|AA A|]
< /music >
Renders
With Audio Playback
< music >
X: 2
T: Marriage May Become A Curse
R: polka
M: 2/4
L: 1/8
K: Dmaj
|:B|AB/A/ F/G/A/F/|BB AF/A/|Bc/d/ cd/e/|d/e/f/g/ ea|
AB/A/ FG/A/|BB A2|A/B/c/d/ B/c/d/e/|fe d:|
|:A|fa/f/ ed/c/|de c2|B/c/d/e/ c/d/e/f/|d/e/f/g/ e2|
[1 ff e2|dd cd/c/|Bd/B/ ce/c/|dc d:|
[2 AB/A/ FG/A/|BB A2|AB/c/ de|fe d||
< /music >
Renders
Custom Options
< music id="my-tune" audio="true" download="true" lazy="false" >
X: 1
T: Custom Tune
M: 4/4
L: 1/8
K: G
D | G2 G2 GABc | d4 d2 cB | A2 A2 ABcd | e4 e2 dc |
B2 B2 Bcde | f4 f2 ed | c2 c2 cdef | g6 |]
< /music >
Parameters
id(default: “score”) - Unique identifier for the music elementaudio(default: false) - Enable audio playback controlsdownload(default: false) - Show MIDI download optionlazy(default: true) - Enable lazy loading (loads when scrolled into view)abcOptions(default: null) - Custom ABCjs options as JSON
Advanced Configuration
For pages with multiple music elements, you can disable lazy loading for better UX:
<!-- First music loads immediately -->
< music lazy="false" >
X: 1
T: Introduction
...
< /music >
<!-- Subsequent music loads on scroll (default) -->
< music >
X: 2
T: Main Theme
...
< /music >