rhythmicon-vue

Vue components to display and interact with rhythmic patterns

Table of Contents

• Install
• Usage
• Components
  • RhythmSequencer
  • RhythmInput
  • RhythmCircle
  • RhythmScore
• Maintainers
• Contributing
• License

Install

npm install rhythmicon-vue

Usage

import { RhythmSequencer, RhythmInput, RhythmCircle, RhythmScore } from "rhythmicon-vue"

Components

Rhythms must be provided as array of pulses, each being either a beat (value 1) or a rest (value 0), for instance [1,0,0,1,0,0,1,0] for the tresillo rhythm. See package rhythmicon-rhythm for an extension of this data structure as class.

RhythmSequencer

A row of buttons representing the pulses of a Rhythm. Pulses can be toggled to represent a beat or a rest.

<RhythmSequencer :rhythm="rhythm" :pulse="pulse" @toggle="toggle" />

Properties:

• rhythm: the rhythm to display (Array or instance of Rhythm)
• pulse: index of the currently active pulse (optional)
• @toggle: event emitted when a pulse is toggled

RhythmInput

A text input field to show and edit a rhythm pattern. Editing is submitted on Enter or aborted on Esc. Rhythm can be entered in form of beats and rests (e.g. x--x--x-) or in form of durations (e.g. 3+3+2 or ++3+2+3 for rotated variant --x--x-x). The input is normalized to characters x for beat and - for rest. Display mode can be switched between beats/rests and durations with arrow up/down on valid input.

<RhythmInput v-model="rhythm" />

The layout can be configured with the following CSS classes:

• rhythm-input for the input element

RhythmCircle

A circular visualization of a rhythm as SVG image. Pulses are spread evenly around the circle as dots. A pulse can be toggled to represent a beat or a rest by clicking on the dot.

<RhythmCircle :rhythm="rhythm" :pulse="pulse" @toggle="toggle" />

Properties:

• rhythm: the rhythm to display (Array or instance of Rhythm)
• pulse: index of the currently active pulse (optional)
• @toggle: event emitted when a pulse is toggled

The layout can be configured with the following CSS classes:

• rhythm-circle for the SVG root element
• beat-dot for a dot representing a beat
• rest-dot for a dot representing a rest
• active for the active dot when property pulse is set
• polygon for the inner polygon connecting beat dots

RhythmScore

A staff with notes and rests to show a rhythm.

Details depend on time signature, this is still being worked on!

Requires the Bravura font to be loaded.

<RhythmScore :rhythm="rhythm" />

Properties:

• rhythm: the rhythm to display (Array or instance of Rhythm)
• pulse: index of the currently active pulse (optional)
• @toggle: event emitted when a note or rest is clicked on

Implementation is based on an idea by Stephen Band. See his library Scribe for a more sophisticated music rendering!

Maintainers

• @nichtich (Jakob Voß)

Contributing

Contributions are welcome! Best use the rhythmicon issue tracker for questions, bug reports, and/or feature requests!

License

MIT license