Piano Roll

The notes of a song passing by as it plays, as on the paper roll of a player piano: a keyboard standing on the left, one lane for each key, and each note as a block in the lane of its pitch, as wide as it lasts. A note sounds from the moment it touches the keyboard until it has gone into it, and lights its key meanwhile. Pressing a key mutes it: its notes fade and it no longer lights up. Under the notes sit a button that plays and pauses, the time played, a progress bar and the length of the song.

The keyboard goes from one key below the lowest note to one above the highest, and the lanes share the height of the element.

Import

Importing the library registers <pix-piano-roll>.

import '@ilusiva/pix';

Basic

<pix-piano-roll loop duration="8"></pix-piano-roll>

<p>Last event: <output>none</output></p>

element.notes = [...scale, ...scale.slice().reverse()].map((pitch, index) => ({
    pitch,
    start: index * 0.5,
    duration: 0.45,
  }));

let context;

element.addEventListener('play', () => {
    output.textContent = 'play';
    context ??= new AudioContext();
  });

element.addEventListener('pause', () => {
    output.textContent = 'pause';
  });

element.addEventListener('mute', () => {
    output.textContent = 'mute ' + element.muted.join(' ');
  });

element.addEventListener('note', (event) => {
    const oscillator = context.createOscillator();
    const gain = context.createGain();
    const end = context.currentTime + event.detail.duration;
    oscillator.type = 'square';
    oscillator.frequency.value = 440 * 2 ** ((event.detail.pitch - 69) / 12);
    gain.gain.setValueAtTime(0.05, context.currentTime);
    gain.gain.setTargetAtTime(0, end - 0.02, 0.005);
    oscillator.connect(gain).connect(context.destination);
    oscillator.start();
    oscillator.stop(end);
  });
</script>

Attributes

Name	Type	Default	Description
`position`	number	0	Seconds of the song already played. Defaults to 0.
`duration`	number	0	Length of the song in seconds. Defaults to the end of its last note.
`playing`	boolean	false	Whether the song is playing, which the button switches. While it plays, `position` advances by itself.
`loop`	boolean	false	The song repeats: `position` may keep growing past the length, and the beginning of the song is shown coming again before the end.
`play-label`	string	'Play'	Accessible name of the button while it plays the song. Defaults to `Play`.
`pause-label`	string	'Pause'	Accessible name of the button while it pauses the song. Defaults to `Pause`.
`mute-label`	string	'Mute'	Start of the accessible name of each key, followed by the name of the key. Defaults to `Mute`.

Properties

Name	Type	Description
`notes`	PianoRollNote[]	In any order.
`muted`	number[]	Pitches of the muted keys, counted as in MIDI.
`length`	number	Length of the song in seconds: `duration` when it is set, and the end of the last note otherwise.

Methods

Method	Description
`play(): void`	Starts over when a song that plays once is at its end. Does nothing while playing.
`pause(): void`	Does nothing unless playing.
`mute(pitch: number): void`	Does nothing when the key is muted already.
`unmute(pitch: number): void`	Does nothing unless the key is muted.

Events

Name	Description
`play`	The song started, or went on from where it paused.
`pause`	The song paused, keeping its place, or reached its end.
`mute`	A key was muted or unmuted.
`note`	A note started on a key that is not muted. `event.detail` holds its `pitch` and its `duration`. The piano roll makes no sound: this is when the page plays the note.