Scribe 0.6

Scribe is a music notator packaged in a custom element that turns sequences of musical events into HTML. Music is laid out using flex and grid, sized in relative font sizes, and responsive to the flow of the web, making it readable, customisable, and perfect for embedding musical examples in tutorials, for publishing lead sheets to be read on a phone at a gig, or for live feedback of, say, MIDI input in a web app. 

<scribe-music src="./blue-in-green.json"></scribe-music>
<scribe-music staff="drum" src="./caravan-drums.json"></scribe-music>
<scribe-music staff="grand" src="./ae-fond-kiss.json" transpose="4"></scribe-music>

Get started

Import the custom element

Include the CSS and JS from the CDN in your document <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/stephband/scribe@0.6.x/build/scribe-music/element.css" />
<script type="module" src="https://cdn.jsdelivr.net/gh/stephband/scribe@0.6.x/build/scribe-music/element.js"></script>

Write a tune

Write some sequence data and use <scribe-music> to render it:

<script type="text/sequence" id="tune">
    0 key D
    0 meter 4/4
    0 D4 1
    1 F#4 1
    2 A4 1
</script>
<scribe-music src="#tune"></scribe-music>
<script type="application/json" id="tune">{
    "events": [
        [0, "key", "D"],
        [0, "meter", 4, 1],
        [0, "note", "D4", 0.1, 1],
        [1, "note", "F#4", 0.1, 1],
        [2, "note", "A4", 0.1, 1]
    ]
}</script>
<scribe-music src="#tune"></scribe-music>

Documentation

API Reference

Attributes and properties

attribute property type description
src .src URL URL of a JSON or text file, or hashref of a script, containing sequence data
type .type string Mimetype or type of data to fetch: "application/json" (or "json"), "text/sequence"
staff .staff string "treble", "alto", "tenor", "bass", "grand", "drum" or "percussion"
key .key string The name of a major key, accepts "Ab" or "A♭" and "F#" or "F♯"
meter .meter string A meter expressed as a standard time signature, such as "4/4" or "6/8"
beat .beat number Beat at which render begins
duration .duration number Duration in beats to render
transpose .transpose number Transposition in semitones
shuffle   boolean Boolean attribute, displays swung 16ths as straight 16ths
swing   boolean Boolean attribute, displays swung 8ths as straight 8ths
layout   string Controls bar distribution "compact" (the default) or "regular" (even number of bars per line)
  .data object The sequence as a reactive object – mutating this causes the element to re-render

SMuFL fonts

Scribe supports SMuFL fonts, W3C-standard fonts for rendering musical symbols. By default Scribe uses Jazz font, as seen in the examples on this page. It comes tested with a number of other openly licensed SMuFL fonts. To change the look of your music include one of these stylesheets: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/stephband/scribe@0.6/build/fonts/petaluma.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/stephband/scribe@0.6/build/fonts/bravura.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/stephband/scribe@0.6/build/fonts/broadway.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/stephband/scribe@0.6/build/fonts/ash.css" />

And set the new font-family:

Petaluma

font-family: Petaluma, PetalumaText;

Bravura

font-family: Bravura, BravuraText;

Broadway

font-family: Broadway, BroadwayText;

Ash

font-family: Ash, AshText;

Status

Scribe 0.6 introduces a neural network for note spelling, refines the elastic phase-locked metrical quantiser (or rhythm detector), employs CSS sub-grids to support multi-stave scoring and supports a small set of automatically rendered dynamic and duration accents. It does have some rough edges, and I am happy to get feedback: leave an issue on GitHub github.com/stephband/scribe/, bleat me on BlueSky bsky.app/profile/stephen.band.

If you are curious about how the CSS lays out music notation, there's a blog post introducing the approach at cruncher.ch/blog/printing-music-with-css-grid/. Scribe's CSS has changed since that was written, but the technique is the same.