123 |
124 |
125 |
133 |
134 |
135 |
--------------------------------------------------------------------------------
/modules/parse/parse-abc.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | parseABC()
4 | A quick-and-dirty interface with abcjs's parser. Please clean me up.
5 | **/
6 |
7 | import matches from 'fn/matches.js';
8 | import ABCParser from '../../lib/abcjs/modules/parse/abc_parse.js';
9 |
10 | const parser = new ABCParser();
11 |
12 | function TODO(message) {
13 | throw new Error('Todo: ' + message);
14 | }
15 |
16 | function getSequence(id, data) {
17 | let sequence = data.sequences.find(matches({ id }));
18 | if (sequence) return sequence;
19 |
20 | sequence = { id, events: [], cursor: 0 };
21 | data.sequences.push(sequence);
22 | data.events.push([0, "sequence", id]);
23 | return sequence;
24 | }
25 |
26 | function findLastOfType(type, events) {
27 | let n = events.length;
28 | while (n--) {
29 | if (events[n][1] === type) return events[n];
30 | }
31 | }
32 |
33 | function getAbsoluteFromDiatonicPitch(root, degree) {
34 | // Not entirely sure how ABC decides where the 'root' of the melody is.
35 | // We just add 60, but its arbitrary.
36 | return [0,
37 | 0, 2, 4, 5, 7, 9, 11,
38 | 12, 14, 16, 17, 19, 21, 23,
39 | 24, 26, 28, 29, 31, 33, 35,
40 | 36, 38, 40, 41, 43, 45, 47,
41 | 48
42 | ][degree] + root + 60;
43 | }
44 |
45 | export default function parseABC(abc) {
46 | parser.parse(abc);
47 |
48 | const tune = parser.getTune();
49 | const data = tune.lines.reduce((data, line) => {
50 | line.staff.reduce((sequences, staff, i) => {
51 | const sequence = getSequence(i, data);
52 | const events = sequence.events;
53 | //console.log(staff);
54 | // If clef has changed push in a clef event
55 | if (staff.clef) {
56 | const clef = staff.clef.type;
57 | const clefEvent = findLastOfType('clef', events);
58 | if (!clefEvent || clefEvent[2] !== clef) {
59 | events.push([0, 'clef', clef]);
60 | }
61 | }
62 |
63 | // If key has changed push in a key event
64 | let keyEvent = findLastOfType('key', events);
65 | if (staff.key) {
66 | const root = staff.key.mode === '' ?
67 | staff.key.root :
68 | TODO('What happens when ABC decides key.mode is not an empty string?') ;
69 |
70 | const roots = { C: 0, D: 2, E: 4, F: 5, G: 7, A: 9, B: 11 };
71 |
72 | if (!roots[root]) {
73 | TODO('ABC says root is "' + root + '", we have not implemented support for that');
74 | }
75 |
76 | const rootN = roots[root];
77 |
78 | if (!keyEvent || keyEvent[2] !== root) {
79 | keyEvent = [sequence.cursor, 'key', rootN];
80 | events.push(keyEvent);
81 | }
82 | }
83 |
84 | // If meter has changed push in a meter event
85 | if (staff.meter) {
86 | // Not sure why staff.meter.value is an array? Either way it
87 | // contains strings for num/den so we need to convert...
88 | const denominator = 1 / (+staff.meter.value[0].den / 4);
89 | const numerator = +staff.meter.value[0].num * denominator;
90 | const meterEvent = findLastOfType('meter', events);
91 | if (!meterEvent || meterEvent[2] !== numerator || meterEvent[3] !== denominator) {
92 | events.push([0, 'meter', numerator, denominator]);
93 | }
94 | }
95 |
96 | // Push in notes
97 | if (staff.voices) {
98 | const noteEvent = findLastOfType('note', events);
99 | // I am not currently sure why voices is an array
100 | staff.voices[0].reduce((events, voice) => {
101 | if (voice.el_type === 'note') {
102 | voice.pitches.reduce((events, abcPitch) => {
103 | // abcPitch numbers are relative to the key root and
104 | // describe diatonic steps, not semitones
105 |
106 | events.push([sequence.cursor, "note", getAbsoluteFromDiatonicPitch(keyEvent[2], abcPitch.pitch), 0.25, voice.duration * 4]);
107 | return events;
108 | }, events);
109 |
110 | sequence.cursor += voice.duration * 4;
111 | }
112 | else if (voice.el_type === 'bar') {
113 | // If cursor is not at bar start when a bar comes around...
114 | const meterEvent = findLastOfType('meter', events);
115 | if ((sequence.cursor - meterEvent[0]) % meterEvent[2] !== 0) {
116 | // ...advance cursor to next bar start
117 | const wholeBars = Math.floor((sequence.cursor - meterEvent[0]) / meterEvent[2]);
118 | const beat = (wholeBars + 1) * meterEvent[2];
119 | sequence.cursor = beat;
120 | }
121 | }
122 | else {
123 | console.log('ABC voice ignored:', voice);
124 | }
125 |
126 | return events;
127 | }, events);
128 |
129 | if (staff.voices[1]) {
130 | TODO('What do we do with a second array of voices?');
131 | }
132 | }
133 |
134 | return sequences;
135 | }, data.sequences);
136 |
137 | return data;
138 | }, {
139 | name: tune.metaText.title,
140 | events: [],
141 | sequences: [],
142 | meta: tune.metaText
143 | });
144 |
145 | // Remove cursor property which was just for tracking start beats
146 | data.sequences.forEach((sequence) => delete sequence.cursor);
147 | return data;
148 | }
149 |
--------------------------------------------------------------------------------
/modules/render.js:
--------------------------------------------------------------------------------
1 |
2 | import create from 'dom/create.js';
3 | import px from 'dom/parse-length.js';
4 | import rect from 'dom/rect.js';
5 | import { toRootName } from 'midi/note.js';
6 | import SequenceIterator from 'sequence/sequence-iterator.js';
7 | import Stave from './stave.js';
8 | import createBars from './create-bars.js';
9 | import createElement from './create-element.js';
10 | import { renderBeam } from './beam.js';
11 | import * as glyphs from './glyphs.js';
12 | import truncate from './number/truncate.js';
13 | import config from './config.js';
14 | import log from './log.js';
15 |
16 |
17 | const global = globalThis || window;
18 |
19 |
20 | function isInitialMeterEvent(event) {
21 | return event[0] <= 0 && event[1] === 'meter';
22 | }
23 |
24 | function isInitialKeyEvent(event) {
25 | return event[0] <= 0 && event[1] === 'key';
26 | }
27 |
28 | function toElements(nodes, symbol) {
29 | const element = createElement(symbol);
30 | if (element) { nodes.push(element); }
31 | return nodes;
32 | }
33 |
34 | export function toBarElements(elements, bar) {
35 | elements.push(create('div', {
36 | class: `${ bar.stave.type }-stave stave ${ bar.doubleBarLine ? 'end-bar ' : '' }bar${ bar.error ? ' error ': '' }`,
37 | data: {
38 | beat: bar.beat,
39 | duration: bar.duration,
40 | count: bar.count,
41 | key: toRootName(bar.key),
42 | stave: bar.stave.type
43 | },
44 | children: bar.symbols.reduce(toElements, [])
45 | }));
46 |
47 | return elements;
48 | }
49 |
50 | /* Glyphs for triplet mark d d = d 3 d, instead of saying Swing 8ths, for example
51 | text = glyphs.textNoteShort
52 | + glyphs.textBeam8Short
53 | + glyphs.textNote8Short
54 | + '='
55 | + glyphs.textNoteShort
56 | + ' '
57 | + glyphs.textTuplet3Long
58 | + glyphs.note05Up
59 | */
60 |
61 | export function renderElements(data, excludes, clef, keyname, meter, duration = Infinity, transpose = 0, displace = 0, settings = config) {
62 | const events = data.events;
63 |
64 | // If events contains no initial meter and meter is set, insert a meter event
65 | const meterEvent = events.find(isInitialMeterEvent);
66 | if (!meterEvent && meter) events.unshift([0, 'meter', meter[2], meter[3]]);
67 |
68 | // If events contains no initial key and keyname is set, insert a key event
69 | const keyEvent = events.find(isInitialKeyEvent);
70 | if (!keyEvent && keyname) events.unshift([0, 'key', keyname]);
71 |
72 | // Get the stave controller
73 | const stave = Stave[clef || 'treble'];
74 |
75 | // Make transforms list
76 | const transforms = [];
77 | if (transpose) transforms.push("transpose", transpose);
78 | if (displace) transforms.push("displace", displace);
79 |
80 | // Create sequence object
81 | const sequence = new SequenceIterator(events, data.sequences, transforms);
82 |
83 | // Create bar elements
84 | const bars = createBars(sequence, excludes, stave, settings);
85 | const elements = bars.reduce(toBarElements, []);
86 |
87 | //const keysig = elements[0].querySelectorAll('.acci:not([data-beat])');
88 |
89 | // Creates stave with clef and key signature
90 | const bar0 = bars[0];
91 | const key = bar0.key;
92 | const signature = stave.createSignatureSymbols(key);
93 |
94 | // Quick and dirty way of rendering clefs into left hand side bar
95 | const sidebar = create('div', {
96 | class: `${ stave.type }-stave signature-stave stave`,
97 | children: signature.map(createElement),
98 | data: { key: toRootName(key) }
99 | });
100 |
101 | const column = create('div', {
102 | id: 'side',
103 | class: 'side',
104 | data: { key: toRootName(key) }
105 | });
106 |
107 | let n = 24;
108 | while (n--) column.appendChild(sidebar.cloneNode(true));
109 |
110 | // Return array of elements
111 | elements.unshift(column);
112 | return elements;
113 | }
114 |
115 |
116 | const heads = [
117 | create('span', { html: glyphs.head1, style: 'width: min-content;' }),
118 | create('span', { html: glyphs.head2, style: 'width: min-content;' }),
119 | create('span', { html: glyphs.head4, style: 'width: min-content;' })
120 | ];
121 |
122 | function remove(element) {
123 | element.remove();
124 | }
125 |
126 | export function renderStyle(element, root = element) {
127 | // Measure head widths. Be aware that root may be a fragment (a shadow root)
128 | // and getComputedStyle() won't work on a fragment
129 | root.append.apply(root, heads);
130 |
131 | const head1Width = rect(heads[0]).width;
132 | const head2Width = rect(heads[1]).width;
133 | const head3Width = rect(heads[2]).width;
134 | const computed = window.getComputedStyle(heads[0]);
135 | const fontSize = px(computed.fontSize);
136 |
137 | if (global.DEBUG) log('post render font-size', fontSize, 'heads', `${ head1Width }, ${ head2Width }, ${ head3Width }`);
138 |
139 | heads.forEach(remove);
140 |
141 | // Calculate clef and key signature width
142 |
143 | // TODO: sort out a better system of getting the key signature metrics in here.
144 | // One that isn't going to rely on the font so much? Or maybe include the
145 | // metrics in the font stylesheet?
146 | const side = root.querySelector('.side');
147 | const key = side.dataset.key;
148 | const counts = {'G♭': 6, 'C♯': 5, 'D♭': 5, 'G♯': 4, 'A♭': 4, 'D♯': 3, 'E♭': 3, 'B♭': 2, 'F': 1, 'C': 0, 'G': 1, 'D': 2, 'A': 3, 'E': 4, 'B': 5, 'F♯': 6};
149 | const count = counts[key];
150 |
151 | return `--head-1-size: ${ truncate(6, head1Width / fontSize) }; `
152 | + `--head-2-size: ${ truncate(6, head2Width / fontSize) }; `
153 | + `--head-4-size: ${ truncate(6, head3Width / fontSize) }; `
154 | + `--signature-width: ${ (2.25 + count * 0.625 + 0.625).toFixed(4) }em;`;
155 | }
156 |
157 | export function renderDOM(element, root = element) {
158 | // Render beams
159 | root.querySelectorAll('.beam').forEach(renderBeam);
160 | }
161 |
--------------------------------------------------------------------------------
/classes/stave.css:
--------------------------------------------------------------------------------
1 | @import './stave/stave.css';
2 | @import './stave/treble.css';
3 | @import './stave/treble-up.css';
4 | @import './stave/treble-down.css';
5 | @import './stave/alto.css';
6 | @import './stave/bass.css';
7 | @import './stave/piano.css';
8 | @import './stave/drum.css';
9 | @import './stave/percussion.css';
10 |
11 | /* Add a background line of white behind the start of the bar in Safari so that
12 | when bars overlap to disguise Safari's rounding errors this bar hides the
13 | end of the previous bar. */
14 | /*
15 | :host(.safari) > .stave {
16 | background-image: url('data:image/svg+xml;utf8,');
27 | }
28 |
29 | :host(.safari[clef="piano"]) > .stave {
30 | background-image: url('data:image/svg+xml;utf8,');
46 | }
47 |
48 | :host(.safari[clef="percussion"]) > .stave {
49 | background-image: url('data:image/svg+xml;utf8,');
56 | }
57 | */
58 |
59 | .stave > .tuplet {
60 | grid-row: stave-center;
61 | /* Do some work to center tuplet vertically in stave row, where normally the
62 | baseline is in the center of the stave row. This may not be the same for
63 | every font, approximative. */
64 | align-self: center;
65 | position: relative;
66 | top: calc(0.175em - 1.3125em);
67 | }
68 |
69 | .stave > .down-tuplet {
70 | top: calc(0.175em - 0.875em);
71 | }
72 |
73 | .stave > .coda {
74 | margin: 0;
75 | margin-left: calc(-1 * var(--bar-padding-left) - 0.5em);
76 | margin-right: 0.25em;
77 | grid-column: bar-begin;
78 | grid-row: chords;
79 | align-self: center;
80 | }
81 |
82 | .bar > .barline {
83 | grid-row: bottom;
84 | align-self: center;
85 | }
86 |
87 | .bar > .acci:not([data-beat]) {
88 | /* Accidental with no beat belongs to key signature in the first column */
89 | grid-column-start: 1;
90 | justify-self: start;
91 |
92 | --acci-acci-gap: 0.3em;
93 | }
94 |
95 | .stave > .clef {
96 | margin-right: 0.25em;
97 | }
98 |
99 | .stave > .acci:not([data-beat]) + .acci:not([data-beat]) {
100 | margin-left: 0.03125em;
101 | }
102 |
103 | .signature-stave > [data-pitch="F♭"] { grid-column: 8; }
104 | .signature-stave > [data-pitch="C♭"] { grid-column: 7; }
105 | .signature-stave > [data-pitch="G♭"] { grid-column: 6; }
106 | .signature-stave > [data-pitch="D♭"] { grid-column: 5; }
107 | .signature-stave > [data-pitch="A♭"] { grid-column: 4; }
108 | .signature-stave > [data-pitch="E♭"] { grid-column: 3; }
109 | .signature-stave > [data-pitch="B♭"] { grid-column: 2; }
110 | .signature-stave > [data-pitch="F♯"] { grid-column: 2; }
111 | .signature-stave > [data-pitch="C♯"] { grid-column: 3; }
112 | .signature-stave > [data-pitch="G♯"] { grid-column: 4; }
113 | .signature-stave > [data-pitch="D♯"] { grid-column: 5; }
114 | .signature-stave > [data-pitch="A♯"] { grid-column: 6; }
115 | .signature-stave > [data-pitch="E♯"] { grid-column: 7; }
116 | .signature-stave > [data-pitch="B♯"] { grid-column: 8; }
117 |
118 | .signature-stave[data-key="C♯"] { width: 3.45em; }
119 | .signature-stave[data-key="F♯"] { width: 3.15em; }
120 | .signature-stave[data-key="B"] { width: 2.85em; }
121 | .signature-stave[data-key="E"] { width: 2.55em; }
122 | .signature-stave[data-key="A"] { width: 2.25em; }
123 | .signature-stave[data-key="D"] { width: 1.95em; }
124 | .signature-stave[data-key="G"] { width: 1.65em; }
125 | .signature-stave { width: 1.35em; }
126 | .signature-stave[data-key="F"] { width: 1.65em; }
127 | .signature-stave[data-key="B♭"] { width: 1.95em; }
128 | .signature-stave[data-key="E♭"] { width: 2.25em; }
129 | .signature-stave[data-key="A♭"] { width: 2.55em; }
130 | .signature-stave[data-key="D♭"] { width: 2.85em; }
131 | .signature-stave[data-key="G♭"] { width: 3.15em; }
132 | .signature-stave[data-key="C♭"] { width: 3.45em; }
133 |
--------------------------------------------------------------------------------
/modules/stave/stave.js:
--------------------------------------------------------------------------------
1 |
2 | import nothing from 'fn/nothing.js';
3 | import { toNoteName, toNoteNumber, toRootName, toRootNumber } from 'midi/note.js';
4 | import { toKeyScale } from '../keys.js';
5 | import { spellRoot, spellPitch } from '../spelling.js';
6 | import { rflatsharp, byFatherCharlesPitch, accidentalChars } from '../pitch.js';
7 | import { major } from '../scale.js';
8 | import * as glyphs from "../glyphs.js";
9 |
10 |
11 | const global = globalThis || window;
12 | const assign = Object.assign;
13 | const { floor, round } = Math;
14 |
15 |
16 | /* Stave */
17 |
18 | export default class Stave {
19 | constructor() {}
20 |
21 | /**
22 | .pitched
23 | A boolean indicating whether this stave supports keys and transposition.
24 | **/
25 | pitched = true;
26 |
27 | /**
28 | .rows
29 | An array of row names, from bottom to top of stave. Row names must correspond
30 | to those defined for a given stave in CSS.
31 | **/
32 | rows = nothing;
33 |
34 | /**
35 | .getNoteHTML(pitch, dynamic, duration)
36 | Get the HTML content used for a note of given `pitch`, `dynamic` and
37 | `duration`. For normal chromatic staves only `duration` really matters, but
38 | percussion staves may replace heads based on pitch and dynamics.
39 | **/
40 |
41 | getNoteHTML(pitch, dynamic, duration) {
42 | const name =
43 | // Semibreve
44 | duration >= 4 ? 'head4' :
45 | // Triplet semibreve
46 | Math.fround(duration) === Math.fround(2.666666667) ? 'head4' :
47 | // Minim
48 | duration >= 2 ? 'head2' :
49 | // Triplet minim
50 | Math.fround(duration) === Math.fround(1.333333333) ? 'head2' :
51 | // Everything else
52 | 'head1' ;
53 |
54 | return `${ glyphs[name] }`;
55 | }
56 |
57 | /**
58 | .minRow, .bottomRow, .centerRow, .topRow, .maxRow
59 | Minimum and maximum row numbers supported by the stave. Note that `.minRow`
60 | is greater than `.maxRow`. We are counting rows in pitch order.
61 | **/
62 |
63 | get maxRow() { return 0; }
64 | get topRow() { return this.centerRow - 4; }
65 | get centerRow() { return floor(0.5 * (this.rows.length - 1)); }
66 | get bottomRow() { return this.centerRow + 5; }
67 | get minRow() { return this.rows.length - 1; }
68 |
69 | /**
70 | .minPitch, .bottomPitch, .centerPitch, .topPitch, .maxPitch
71 | Minimum and maximum pitch names supported by the stave corresponding to the
72 | first and last row names in `.rows`, and lower, middle and upper stave pitches
73 | corresponding to the lower, middle and upper lines of the stave.
74 | **/
75 |
76 | get maxPitch() { return this.rows[this.maxRow]; }
77 | get topPitch() { return this.rows[this.topRow]; }
78 | get centerPitch() { return this.rows[this.centerRow]; }
79 | get bottomPitch() { return this.rows[this.bottomRow]; }
80 | get minPitch() { return this.rows[this.minRow]; }
81 |
82 | /**
83 | .movePitch(pitch, n)
84 | Chromatically transpose `pitch` by `n` semitones within the bounds of
85 | `.minPitch` and `.maxPitch`. Should a transposed pitch fall outside this
86 | range, returns `undefined`.
87 | **/
88 | movePitch(pitch, n) {
89 | // Chromatic transpose
90 | const min = toNoteNumber(this.minPitch);
91 | const max = toNoteNumber(this.maxPitch);
92 | const number = toNoteNumber(pitch) + n;
93 | // Don't transpose outside the limits of the stave
94 | return number >= min && number <= max ?
95 | number :
96 | undefined ;
97 | }
98 |
99 | /**
100 | .getPart(pitch)
101 | **/
102 |
103 | parts = [{
104 | name: 'main'
105 | }];
106 |
107 | getPart(number) {
108 | return this.parts[0];
109 | }
110 |
111 | /**
112 | .getRow(part, pitch)
113 | Returns the row index of a given pitch name or number. Multi-staff staves
114 | require part to know which staff they are positioned upon.
115 | **/
116 | getRow(part, pitch) {
117 | const name = typeof pitch === 'string' ? pitch : toNoteName(pitch) ;
118 | const row = name.replace(rflatsharp, '');
119 | const i = this.rows.indexOf(row);
120 | if (global.DEBUG && i === -1) throw new Error('Pitch "' + pitch + '" is not supported by stave ' + this.constructor.name);
121 | if (i === -1) console.warn('Pitch "' + pitch + '" is not supported by stave ' + this.constructor.name);
122 | return i > -1 ? i : undefined ;
123 | }
124 |
125 | /**
126 | .getPitch(row)
127 | Returns the pitch of a given row number.
128 | **/
129 | getPitch(row) {
130 | const names = this.rows[row];
131 | return names.split(/\s+/)[0];
132 | }
133 |
134 | /**
135 | .getSpelling()
136 | Gets spelling of a given pitch. Returns a pitch name string.
137 | **/
138 | getSpelling(key, event) {
139 | return event[1] === 'chord' ?
140 | spellRoot(key, event[2]) :
141 | spellPitch(key, event[2]) ;
142 | }
143 |
144 | createKeySymbols(key) {
145 | const symbols = [];
146 | const keynumber = toRootNumber(key);
147 | const keyscale = toKeyScale(keynumber);
148 |
149 | // Add key signature
150 | symbols.push.apply(symbols, keyscale
151 | .map((n, i) => (n - major[i] && {
152 | type: 'acci',
153 | pitch: toRootName(major[i]) + accidentalChars[n - major[i]],
154 | value: n - major[i],
155 | part: this.parts[0]
156 | }))
157 | .filter((o) => !!o)
158 | .sort(byFatherCharlesPitch)
159 | );
160 |
161 | return symbols;
162 | }
163 |
164 | createSignatureSymbols(key) {
165 | const symbols = [{
166 | type: 'clef',
167 | clef: this.type,
168 | part: this.parts[0]
169 | }];
170 |
171 | return symbols.concat(this.createKeySymbols(key));
172 | }
173 |
174 | /**
175 | .yRatioToPitch(y)
176 | Used for converting pointer movements to pitch changes.
177 | **/
178 | yRatioToPitch(y) {
179 | const n = floor(y * this.pitches.length);
180 | return n < 0 ? this.pitches[0] :
181 | n > this.pitches.length - 1 ? this.pitches[this.pitches.length - 1] :
182 | this.pitches[n] ;
183 | }
184 | }
185 |
--------------------------------------------------------------------------------
/modules/stave/piano.js:
--------------------------------------------------------------------------------
1 |
2 | import * as glyphs from "../glyphs.js";
3 | import { toNoteName, toRootNumber, toRootName } from 'midi/note.js';
4 | import { toKeyScale } from '../keys.js';
5 | import { rflatsharp, byFatherCharlesPitch, accidentalChars } from '../pitch.js';
6 | import { major } from '../scale.js';
7 | import Stave from './stave.js';
8 |
9 |
10 | const global = globalThis || window;
11 | const assign = Object.assign;
12 |
13 |
14 | /**
15 | A simple piano grand stave which brute splits treble from bass at Bb3.
16 | **/
17 |
18 | export default class PianoStave extends Stave {
19 | type = 'piano';
20 | rows = [
21 | "rh-A6 soprano-A6 alto-A6",
22 | "rh-G6 soprano-G6 alto-G6",
23 | "rh-F6 soprano-F6 alto-F6",
24 | "rh-E6 soprano-E6 alto-E6",
25 | "rh-D6 soprano-D6 alto-D6",
26 | "rh-C6 soprano-C6 alto-C6",
27 | "rh-B5 soprano-B5 alto-B5",
28 | "rh-A5 soprano-A5 alto-A5",
29 | "rh-G5 soprano-G5 alto-G5",
30 | "rh-F5 soprano-F5 alto-F5",
31 | "rh-E5 soprano-E5 alto-E5",
32 | "rh-D5 soprano-D5 alto-D5",
33 | "rh-C5 soprano-C5 alto-C5",
34 | "rh-B4 soprano-B4 alto-B4",
35 | "rh-A4 soprano-A4 alto-A4",
36 | "rh-G4 soprano-G4 alto-G4",
37 | "rh-F4 soprano-F4 alto-F4",
38 | "rh-E4 soprano-E4 alto-E4",
39 | "rh-D4 soprano-D4 alto-D4",
40 | "rh-C4 soprano-C4 alto-C4",
41 | "rh-B3 soprano-B3 alto-B3",
42 | "lh-B4 rh-A3 soprano-A3 alto-A3 tenor-B4 bass-B4",
43 | "lh-A4 rh-G3 soprano-G3 alto-G3 tenor-A4 bass-A4",
44 | "lh-G4 rh-F3 soprano-F3 alto-F3 tenor-G4 bass-G4",
45 | "lh-F4 rh-E3 soprano-E3 alto-E3 tenor-F4 bass-F4",
46 | "lh-E4 rh-D3 soprano-D3 alto-D3 tenor-E4 bass-E4",
47 | "lh-D4 tenor-D4 bass-D4",
48 | "lh-C4 tenor-C4 bass-C4",
49 | "lh-B3 tenor-B3 bass-B3",
50 | "lh-A3 tenor-A3 bass-A3",
51 | "lh-G3 tenor-G3 bass-G3",
52 | "lh-F3 tenor-F3 bass-F3",
53 | "lh-E3 tenor-E3 bass-E3",
54 | "lh-D3 tenor-D3 bass-D3",
55 | "lh-C3 tenor-C3 bass-C3",
56 | "lh-B2 tenor-B2 bass-B2",
57 | "lh-A2 tenor-A2 bass-A2",
58 | "lh-G2 tenor-G2 bass-G2",
59 | "lh-F2 tenor-F2 bass-F2",
60 | "lh-E2 tenor-E2 bass-E2",
61 | "lh-D2 tenor-D2 bass-D2",
62 | "lh-C2 tenor-C2 bass-C2",
63 | "lh-B1 tenor-B1 bass-B1",
64 | "lh-A1 tenor-A1 bass-A1",
65 | "lh-G1 tenor-G1 bass-G1",
66 | "lh-F1 tenor-F1 bass-F1",
67 | "lh-E1 tenor-E1 bass-E1"
68 | ];
69 |
70 | getTimeSigHTML(numerator, denominator, eventId) {
71 | return `
72 | ${ glyphs['timeSig' + numerator] }
73 | ${ glyphs['timeSig' + denominator] }
74 |
75 |
76 | ${ glyphs['timeSig' + numerator] }
77 | ${ glyphs['timeSig' + denominator] }
78 | `;
79 | }
80 |
81 | staffs = ['bass', 'treble'];
82 |
83 | parts = [{}, {
84 | name: 'lh',
85 | staff: 'bass',
86 | topRow: 29,
87 | centerRow: 33,
88 | bottomRow: 38
89 | }, {
90 | name: 'rh',
91 | staff: 'treble',
92 | topRow: 9,
93 | centerRow: 13,
94 | bottomRow: 18
95 | }, {
96 | // Voice range C4-C6
97 | // Soprano sax Ab3-Eb6
98 | // Trumpet F#3-C6
99 | name: 'soprano',
100 | staff: 'treble',
101 | topRow: 9,
102 | centerRow: 13,
103 | bottomRow: 18,
104 | stemup: true
105 | }, {
106 | // Voice range G3-G5
107 | // Flugel horn E3-Bb5
108 | // Alto sax rannge Db3-Ab5
109 | name: 'alto',
110 | staff: 'treble',
111 | topRow: 9,
112 | centerRow: 13,
113 | bottomRow: 18,
114 | stemup: false
115 | }, {
116 | // Voice range C3-C5
117 | // Tenor Sax range Ab2-Eb5
118 | name: 'tenor',
119 | staff: 'bass',
120 | topRow: 29,
121 | centerRow: 33,
122 | bottomRow: 38,
123 | stemup: true
124 | }, {
125 | // Voice range E2-C4
126 | // Trombone range E2-Bb4
127 | // Sousaphone Eb1-Bb4
128 | name: 'bass',
129 | staff: 'bass',
130 | topRow: 29,
131 | centerRow: 33,
132 | bottomRow: 38,
133 | stemup: false
134 | }];
135 |
136 | /**
137 | .getRow(part, pitch)
138 | Returns the row index of a given pitch name or number.
139 | **/
140 | getRow(part, pitch) {
141 | pitch = typeof pitch === 'string' ? pitch : toNoteName(pitch) ;
142 | const name = part.name + '-' + pitch.replace(rflatsharp, '');
143 | const i = this.rows.findIndex((row) => row.includes(name));
144 | if (global.DEBUG && i === -1) throw new Error('Pitch "' + name + '" is not supported by ' + this.constructor.name);
145 | if (i === -1) console.warn('Pitch "' + name + '" is not supported by ' + this.constructor.name);
146 | return i > -1 ? i : undefined ;
147 | }
148 |
149 | getPart(number) {
150 | return typeof number === 'number' ?
151 | number < 60 ?
152 | this.parts[1] :
153 | this.parts[2] :
154 | /[012]$|[AC-G][b#♭♯𝄫𝄪]*3$/.test(number) ?
155 | this.parts[1] :
156 | this.parts[2] ;
157 | }
158 |
159 | createKeySymbols(key) {
160 | const symbols = [];
161 | const keynumber = toRootNumber(key);
162 | const keyscale = toKeyScale(keynumber);
163 | const keysig = keyscale
164 | .map((n, i) => (n - major[i] && {
165 | type: 'acci',
166 | pitch: toRootName(major[i]) + accidentalChars[n - major[i]],
167 | value: n - major[i]
168 | }))
169 | .filter((o) => !!o)
170 | .sort(byFatherCharlesPitch);
171 |
172 | // Add key signature to both staffs
173 | symbols.push.apply(symbols, keysig.map((symbol) => assign({ part: this.parts[1] }, symbol)));
174 | symbols.push.apply(symbols, keysig.map((symbol) => assign({ part: this.parts[2] }, symbol)));
175 |
176 | return symbols;
177 | }
178 |
179 | createSignatureSymbols(key) {
180 | const symbols = [{
181 | type: 'clef',
182 | clef: 'treble',
183 | part: this.parts[1],
184 | stave: this
185 | }, {
186 | type: 'clef',
187 | clef: 'bass',
188 | part: this.parts[2],
189 | stave: this
190 | }];
191 |
192 | return symbols.concat(this.createKeySymbols(key));
193 | }
194 | }
195 |
--------------------------------------------------------------------------------
/test/repeats.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <scribe-music>
5 |
6 |
7 |
8 |
9 |
10 |
11 |
20 |
21 |
30 |
31 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
53 |
54 |
55 |
56 |
Bar repeats
57 |
58 |
59 |
66 |
67 |
68 |
69 |
77 |
78 |
79 |
80 |
89 |
90 |
91 |
92 |
107 |
108 |
109 |
110 |
117 |
118 |
119 |
120 |
129 |
130 |
131 |
132 |
143 |
144 |
145 |
146 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
--------------------------------------------------------------------------------
/scribe-music/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | # ``
5 |
6 | A custom element that imports, interprets and renders music notation from JSON
7 | data.
8 |
9 | ## Get started
10 |
11 | To use the `` custom element, import the CSS and JS from the CDN:
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | The `` element is now registered. It renders music notation from
19 | JSON data imported via its `src` attribute:
20 |
21 | ```html
22 |
23 | ```
24 |
25 |
26 |
27 |
28 | ## Attributes and properties
29 |
30 | | Attribute | Property | Type | Description |
31 | | :---------- | :----------- | :-------- | :---------- |
32 | | `src` | `.src` | `URL` | A URL of a JSON file or hashref of a script in the document |
33 | | | `.data` | `object` | Gets and sets sequence data |
34 | | `clef` | `.clef` | `string` | One of `"treble"`, `"bass"`, `"piano"`, `"alto"`, `"drum"` or `"percussion"` |
35 | | `key` | `.key` | `string` | The name of a major key, eg. `"Ab"` |
36 | | `meter` | `.meter` | `string` | The time signature, eg. `"4/4"` |
37 | | `transpose` | `.transpose` | `number` | Transposes notation by a given number of semitones |
38 | | `layout` | | `string` | Either `"compact"` or `"regular"` |
39 | | `shuffle` | | `boolean` | Boolean attribute, sets display of swung 16ths as straight 16ths |
40 | | `swing` | | `boolean` | Boolean attribute, sets display of swung 8ths as straight 8ths |
41 |
42 |
43 | ### `src="url"`
44 |
45 | Both an attribute and a property. The URL of a JSON file containing
46 | sequence data.
47 |
48 | ```html
49 |
50 | ```
51 |
52 | The `src` attribute may alternatively reference a `
80 |
81 |
82 |
83 | ```
84 |
85 | A few examples of sequence data can be found in the data/
86 | directory.
87 |
88 |
89 | ### `.data`
90 |
91 | Property only.
92 | Set an object with an `events` array, structured as a sequence object.
93 |
94 | ```js
95 | const element = document.body.querySelector('scribe-music');
96 |
97 | element.data = {
98 | name: 'My Song',
99 | events: [...],
100 | sequences: [...]
101 | };
102 | ```
103 |
104 | Get Scribe's sequence object.
105 | To export Sequence JSON, stringify `scribe.data`:
106 |
107 | ```js
108 | let scribe = document.body.querySelector('scribe-music');
109 | let mySong = JSON.stringify(scribe.data);
110 | ```
111 |
112 |
113 | ### `clef="treble"`
114 |
115 | Both an attribute and a property.
116 | The name of the clef, one of `"treble"`, `"treble-up"`, `"treble-down"`, `"alto"`,
117 | `"bass"`, `"piano"`, `"drum"` or `"percussion"`. Defaults to `"treble"`.
118 |
119 | ```html
120 |
121 | ```
122 |
123 | ```js
124 | let scribe = document.body.querySelector('scribe-music');
125 | console.log(scribe.clef) // "bass";
126 | ```
127 |
128 |
129 | ### `key="C"`
130 |
131 | Both an attribute and a property.
132 | Gets and sets the key signature of the stave. Accepts any chromatic note name,
133 | spelled with unicode sharps `♯` and flats `♭` or with hash `#` and small case `b`.
134 | This is the name of the tonic of a major scale. Defaults to `"C"`.
135 |
136 | ```html
137 |
138 | ```
139 |
140 | ```js
141 | let scribe = document.body.querySelector('scribe-music');
142 | scribe.key = "B♭";
143 | ```
144 |
145 | There is no provision for choosing a minor key. Declare its relative major.
146 |
147 | The key is the key signature pre-transposition. If `transpose` is set to
148 | something other than `0`, the key signature is also transposed.
149 |
150 | The key attribute/property is superceded by a `"key"` event found in the data
151 | at beat `0`.
152 |
153 |
154 | ### `meter="4/4"`
155 |
156 | Both an attribute and a property.
157 | The meter, expressed as a standard time signature.
158 |
159 | ```html
160 |
161 | ```
162 |
163 | ```js
164 | let scribe = document.body.querySelector('scribe-music');
165 | scribe.meter = "3/4";
166 | ```
167 |
168 | This setting is superceded by a `"meter"` event found in the data at beat `0`.
169 | If this attribute is omitted (or the property not set in JS), no time signature is displayed (unless the data contains a `"meter"` event at beat `0`).
170 | Defaults to `"4/4"`.
171 |
172 |
173 | ### `transpose="0"`
174 |
175 | Both an attribute and a property.
176 | Sets scribe to render notation transposed by `transpose` semitones. Transposition
177 | is applied to key signature, notes and chords before render, and not to the underlying data.
178 |
179 | ```html
180 |
181 | ```
182 |
183 | ```js
184 | let scribe = document.body.querySelector('scribe-music');
185 | scribe.transpose = 2;
186 | ```
187 |
188 | ### `layout="compact"`
189 |
190 | Both an attribute and a property.
191 | Sets scribe to render notation transposed by `transpose` semitones. Transposition
192 | is applied to key signature, notes and chords before render, and not to the underlying data.
193 |
194 | ```html
195 |
196 | ```
197 |
198 | ```js
199 | let scribe = document.body.querySelector('scribe-music');
200 | scribe.transpose = 2;
201 | ```
202 |
203 |
204 | ### `shuffle`
205 |
206 | A boolean attribute. Displays swung 16ths as straight 16ths.
207 |
208 | ```html
209 |
210 | ```
211 |
212 |
213 | ### `swing`
214 |
215 | A boolean attribute. Displays swung 8ths as straight 8ths.
216 |
217 | ```html
218 |
219 | ```
220 |
--------------------------------------------------------------------------------
3 |
4 | # `
26 |
27 |
28 | ## Attributes and properties
29 |
30 | | Attribute | Property | Type | Description |
31 | | :---------- | :----------- | :-------- | :---------- |
32 | | `src` | `.src` | `URL` | A URL of a JSON file or hashref of a script in the document |
33 | | | `.data` | `object` | Gets and sets sequence data |
34 | | `clef` | `.clef` | `string` | One of `"treble"`, `"bass"`, `"piano"`, `"alto"`, `"drum"` or `"percussion"` |
35 | | `key` | `.key` | `string` | The name of a major key, eg. `"Ab"` |
36 | | `meter` | `.meter` | `string` | The time signature, eg. `"4/4"` |
37 | | `transpose` | `.transpose` | `number` | Transposes notation by a given number of semitones |
38 | | `layout` | | `string` | Either `"compact"` or `"regular"` |
39 | | `shuffle` | | `boolean` | Boolean attribute, sets display of swung 16ths as straight 16ths |
40 | | `swing` | | `boolean` | Boolean attribute, sets display of swung 8ths as straight 8ths |
41 |
42 |
43 | ### `src="url"`
44 |
45 | Both an attribute and a property. The URL of a JSON file containing
46 | sequence data.
47 |
48 | ```html
49 |