rmoorman / midicast

a web extension that streams songs from a web page to a MIDI instrument

Midicast

a web extension that streams songs from a web page to a MIDI instrument

How does it work?

Midicast scans the page you're on for MIDI links. Whatever it finds will show up in a list in the extension. Click one of the songs in the extension to start playing it. Midicast should work with any instrument that accepts MIDI input, such as a Yamaha Disklavier® player piano.

Installation

Midicast is available on the Chrome Web Store.

Troubleshooting

Your MIDI instrument must be connected to your computer. If you are using a Mac and your instrument supports Bluetooth®, open the Audio MIDI Setup app and click Bluetooth:

In the dialog that opens, click Connect next to your instrument:

Architecture

Midicast uses Cycle.js to model dataflow. Each "cycle" receives a collection of input streams and transforms them into output streams, which are captured by "drivers" to draw UI or play notes.

Most of the logic lives in Background.ts. That cycle receives a stream of messages from the UI and outputs a stream of notes to send to the instrument.

Popup.tsx draws the UI when the user clicks the toolbar icon. It displays playback controls, along with a tabbed pane where the user may select a song, or change which instruments are being played. Every time the popup opens, it requests the current state (such as which song is currently playing) from the background page.

SongScanner.tsx is a tab in the popup. It uses the hostPageDriver to search the currently-active tab for links that end in .mid, displaying them in a list. When the user clicks one of the list items, it sends this message to the background page:

{
  type: MessageType.PLAY_SONG,
  payload: {
    label: 'A Song Title',
    url: 'https://example.com/song.mid',
  },
}

The background page fetches the requested MIDI file. MIDI files contain "tracks," each representing the notes for a single instrument. Every 100ms, the background page dispatches the next pulse of notes. If the user has used the Instruments tab to filter tracks, only notes from those tracks will be included. Sending the notes one-pulse-at-a-time allows the user to filter tracks while the song is playing.

cycle-midi listens for notes and forwards them to the instrument with Web MIDI.

cycle-extensions connects the cycles to the web extensions APIs, which pass messages between the cycles, or between a cycle and the host page.

snab-style is a conceptual port of jsxstyle. It provides JSX elements like <Row>, <Column>, and <MaterialIcon> that expose their style attributes as props, making nodes easier to style.

License

Apache 2.0

Note: This is not an official Google product.