midi-visualizer v1.0.1

Visualize a set of MIDI events as a piano roll.

Examples

/** @jsxImportSource sigl */
import $ from 'sigl'

import { MidiVisualizerElement } from 'midi-visualizer'
import { createMidiNoteEvents } from 'webaudio-tools'

const midiEvents = [
  midi - visualizer.createMidiNoteEvents(0, 30, 127, 0.1),
  midi - visualizer.createMidiNoteEvents(0.25, 35, 107, 0.1),
  midi - visualizer.createMidiNoteEvents(0.5, 40, 127, 0.1),
  midi - visualizer.createMidiNoteEvents(0.75, 37, 95, 0.1),
]

const MidiVisualizer = $.element(MidiVisualizerElement)

$.render(
  <MidiVisualizer
    style="width:400px;height:100px;overflow:hidden;resize:both;"
    midiEvents={midiEvents}
  />,
  document.body
)

API

Credits

• sigl by stagas – Web framework
• webaudio-tools by stagas – Useful tools for WebAudio.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas