midi-visualizer

Visualize a set of MIDI events as a piano roll.

npm i midi-visualizer

pnpm add midi-visualizer

yarn add midi-visualizer

Examples

# web

# view source

example/web.tsx

/** @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

# MidiVisualizerElement

src/midi-visualizer.tsx#L12

# constructor()

# new MidiVisualizerElement()

MidiVisualizerElement

# midiEvents  =  []

src/midi-visualizer.tsx#L13

MIDIMessageEvent []

# onmounted

EventHandler<MidiVisualizerElement, CustomEvent<any>>

# onunmounted

EventHandler<MidiVisualizerElement, CustomEvent<any>>

# rects  =  ...

src/midi-visualizer.tsx#L16

readonly [ Rect, number ] []

# timeLength  =  1

src/midi-visualizer.tsx#L14

number

# mounted($)

src/midi-visualizer.tsx#L46

# $

Context<MidiVisualizerElement & JsxContext<MidiVisualizerElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {}, "transition">>

mounted($)  =>

void

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