Sprites.Media.Sequencer.Keyboard

The piano keyboard at the foot of the sequencer editor, where pressing a key toggles the note into the selected cell. It is built entirely by reactive composition: one key per semitone through Repeat, each key's white or black kind and its left offset computed from the semitone with Sprites.Maths and two lookup tables, so a range change rebuilds the keys and no raw layout loop is needed. The module also exposes the constants WhiteWidth, BlackWidth, BlackMask and WhiteIndex that drive the key kinds and positions.

Sprites.Media.Sequencer.Keyboard

Sprites.Media.Sequencer.Keyboard.View Void

Sprites.Media.Sequencer.Keyboard.View(note, range)

The keyboard: a relative strip one key wide per semitone in the range, driving the selected cell's note. note is the shared two way note value the editor derives from the selected cell, the same value the note dropdown and the grid read, so pressing a key updates them together. It repeats one Key over the semitone count.

InputTypeDescription
noteSprites.Reactive.Valuea shared two way value onto the selected cell's note
rangeObject or Sprites.Reactive.Valuea { low, high } semitone range

Returns nothing.

const note = Sprites.Reactive.Value(60);
const range = { low: 48, high: 72 };
Sprites.Media.Sequencer.Keyboard.View(note, range);
The whole keyboard from one call, driving the selected cell's note.

Sprites.Media.Sequencer.Keyboard.Key Void

Sprites.Media.Sequencer.Keyboard.Key(note, semitone, lowWhite)

One key: a button placed at its left offset, white or black by its pitch class, lit when the note matches it, labelled with its note. Pressing sets the note; pressing while lit clears it to undefined. lowWhite is the absolute white index of the range's lowest key, so positions start at zero.

InputTypeDescription
noteSprites.Reactive.Valuethe shared note value
semitoneSprites.Reactive.Value or Numberthis key's semitone
lowWhiteSprites.Reactive.Value or Numberthe range low's absolute white index

Returns nothing.

const note = Sprites.Reactive.Value(60);
const lowWhite = Sprites.Media.Sequencer.Keyboard.WhiteAbsIndex(60);
Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Class('piano');
  Sprites.Media.Sequencer.Keyboard.Key(note, 60, lowWhite);
});
A single middle C key that toggles the note on and off.

Sprites.Media.Sequencer.Keyboard.WhiteAbsIndex Number

Sprites.Media.Sequencer.Keyboard.WhiteAbsIndex(semitone)

The absolute white key index of a semitone, counting whites from semitone zero: seven per octave plus the white index within the octave, from the WhiteIndex lookup. A composite over Sprites.Maths and Sprites.Array that drives every key's horizontal position.

InputTypeDescription
semitoneSprites.Reactive.Value or Numberthe semitone to count whites up to

Returns the white key index as a number value.

const white = Sprites.Media.Sequencer.Keyboard.WhiteAbsIndex(60);
Sprites.Ui.Dom.Text('white index ', white);
The absolute white key index of middle C.

Sprites.Media.Sequencer.Keyboard.WhiteWidth Number

The pixel width of a white key. A constant the key composite reads to lay whites side by side and to place each octave's whites seven wide.

Value 30.

Sprites.Ui.Dom.Text('white width ', Sprites.Media.Sequencer.Keyboard.WhiteWidth);
The white key width read straight from the constant.

Sprites.Media.Sequencer.Keyboard.BlackWidth Number

The pixel width of a black key. A constant the key composite reads to size the black keys and to centre each one on the gap after the white before it.

Value 18.

Sprites.Ui.Dom.Text('black width ', Sprites.Media.Sequencer.Keyboard.BlackWidth);
The black key width read straight from the constant.

Sprites.Media.Sequencer.Keyboard.BlackMask Sprites.Reactive.Value

Which of the twelve pitch classes are black keys, C sharp, D sharp, F sharp, G sharp and A sharp, as a reactive value the key composite indexes by pitch class to pick a white or black key. A namespace constant wrapped once for reading.

const pitchClass = Sprites.Reactive.Value(1);
const black = Sprites.Array.At(Sprites.Media.Sequencer.Keyboard.BlackMask, pitchClass);
Sprites.Ui.Dom.Text('C sharp black ', black);
Reading the black mask at pitch class one, C sharp.

Sprites.Media.Sequencer.Keyboard.WhiteIndex Sprites.Reactive.Value

The white key index within an octave for each pitch class: a white key's own index, and a black key's the white to its left, so a black key positions off the white before it. A reactive value the key composite indexes by pitch class.

const pitchClass = Sprites.Reactive.Value(4);
const within = Sprites.Array.At(Sprites.Media.Sequencer.Keyboard.WhiteIndex, pitchClass);
Sprites.Ui.Dom.Text('E white index ', within);
Reading the white index at pitch class four, E.