ABCjs for LiaScript: Embed and Play Music Notation in Open Courses

Music belongs in open courses. Whether you teach music theory, introduce students to folk music traditions, document historical scores, or simply want to liven up a language lesson with a melody — the ABCjs template lets you write music in plain text and render it as interactive sheet music with a built-in audio player, directly in the browser.

No server, no MIDI files to upload, no external embedding. Just import the template, write ABC notation, and your course comes alive with sound.

What is ABC Notation?

ABC notation is a text-based music notation system — simple enough to type in a plain text editor, expressive enough to describe melodies, chords, rhythms, lyrics, and multiple voices. It was originally created for folk and traditional music and is widely used in online score archives.

A short example:

X: 1
T: Ode an die Freude
C: L. v. Beethoven
M: 4/4
L: 1/4
K: D
E E F G | G F E D | C C D E | E3/2 D/ D2 |

The ABCjs JavaScript library turns this text into rendered notation with a playback button — and the LiaScript template wraps it into a simple macro you can use directly in your course.

Quick Start

Add a single line to your course header:

<!--
import: https://raw.githubusercontent.com/LiaTemplates/ABCjs/main/README.md
-->

For a version-stable import (recommended for published courses):

<!--
import: https://raw.githubusercontent.com/LiaTemplates/ABCjs/0.0.2/README.md
-->

That’s it. All four macros are now available in your document.

Rendering Notes: @ABCJS.render

The simplest macro renders your ABC code as sheet music with a play button:

``` abc @ABCJS.render
X: 1
T: Ode an die Freude
C: L. v. Beethoven
M: 4/4
L: 1/4
K: D
E E F G | G F E D | C C D E | E3/2 D/ D2 |
E E F G | G F E D | C C D E | D3/2 C/ C2 |
D D E C | D E/F/ E C | D E/F/ E D | C D G,2 |
E E F G | G F E D | C C D E | D3/2 C/ C2 |
```

Try it directly in the LiveEditor:

Live Editing: @ABCJS.eval

The real power comes with @ABCJS.eval. This turns the code block into an editable LiaScript editor — learners can modify the score, change notes, transpose melodies, and hear the result immediately. All changes are preserved in the course state.

``` abc
% audio: true
% autoplay: false
% notes: true
X: 1
T: Twinkle Twinkle Little Star
M: 4/4
L: 1/4
K: C
C C G G | A A G2 | F F E E | D D C2 |
G G F F | E E D2 | G G F F | E E D2 |
C C G G | A A G2 | F F E E | D D C2 |
```
@ABCJS.eval

The comment lines (% audio: true, etc.) are settings that override the macro defaults — you can embed them directly in the ABC code.

Try the editable example live:

Fine-grained Control: @ABCJS.renderWith and @ABCJS.evalWith

Both macros accept parameters to configure the output precisely:

``` abc @ABCJS.renderWith(channel="10" audio="true" notes="false")
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|"Em"EBBA B2 EB|~B2 AB dBAG|"D"FDAD BDAD|FDAD dAFD|
"Em"EBBA B2 EB|B2 AB defg|"D"afe^c dBAF|"Em"DEFD E2:|
```

Available options:

Full Template Demo

The full ABCjs README is itself a self-documenting LiaScript course — you can explore all features live:

Use Cases

Music education — Render scales, intervals, sight-reading exercises, and harmonization tasks directly in the course text. Students can modify the notation and hear the result without leaving the page.

Folk and traditional music — ABC notation has a vast archive at abcnotation.com. Paste any score directly into your course.

Music theory — Present chord progressions, voice-leading examples, or counterpoint exercises with playback. Use @ABCJS.eval to let students experiment with modifications.

Language courses — Embed songs and nursery rhymes to support pronunciation, rhythm, and vocabulary learning.

OER and open archives — Since ABC is plain text, your scores are fully version-controllable with Git, shareable without binaries, and independent of any proprietary format.

Learning ABC Notation

ABC notation is easy to pick up. A good starting point is the official documentation at abcnotation.com and the following video series:

• How to get started with ABC notation
• ABC notation basics
• Next steps with ABC notation
• Including lyrics in ABC notation
• Polyphony and multiple voices

Technical Facts

Try It

Related Templates

• mermaid_template — text-based diagram notation (flowcharts, sequence diagrams, Gantt)
• JSXGraph — interactive mathematical visualizations
• plantUML — UML diagrams via PlantUML
• Tikz-Jax — render TikZ/LaTeX figures in the browser