Attention! This repository is archived and the library has been moved to tinkoff/ng-web-apis monorepository

Web MIDI API for Angular

Part of Web APIs for Angular

This library contains abstractions and helpful utils to use Web MIDI API idiomatically with Angular.

Install

npm i @ng-web-apis/common

You would also need @types/webmidi package until it is included in TypeScript. Now install the package:

npm i @ng-web-apis/midi

Usage

To use Web MIDI API with your Angular application you can use tokens, RxJs operators and utils included with this package:

Tokens

MIDI_SUPPORT — boolean value checking browser support
SYSEX — boolean token responsible for system exclusive access, false by default
MIDI_ACCESS — a Promise with MIDIAccess object, depends on SYSEX token for access level
MIDI_INPUT — a Promise with MIDIInput. You would need to provide it yourself see utility functions below
MIDI_OUTPUT — a Promise with MIDIOutput. You would need to provide it yourself see utility functions below
MIDI_MESSAGES — an Observable of MIDIMessageEvent from all MIDIInputs, use rxjs function below to narrow and process the stream

Utility functions

You can provide MIDI_INPUT and MIDI_OUTPUT tokens with following functions:

inputById, inputByName, outputById, outputByName:

import {Component, Inject} from '@angular/core';
import {inputById, MIDI_INPUT, MIDI_OUTPUT, outputByName} from '@ng-web-apis/midi';

@Component({
    selector: 'my-comp',
    template: '...',
    providers: [inputById('input-0'), outputByName('VirtualMIDISynth')],
})
export class MyComponent {
    constructor(
        @Inject(MIDI_INPUT) input: Promise<MIDIInput>,
        @Inject(MIDI_OUTPUT) output: Promise<MIDIOutput>,
    ) {}
}

You can convert MIDI note to frequency and back using toFrequency and toNote functions. They optionally accept second argument for tuning of middle A note using 440 as default value
You can use frequency pipe from FrequencyPipeModule to convert MIDI note to frequency directly in template

RxJs operators

Monotype operators

These are filtering operators which you can use on MIDI_MESSAGES stream to narrow it to your needs. All of them are applied like that:

messages$.pipe(
    filterByChannel(1),
    aftertouch(),
);

filterByChannel only lets through messages from given channel (0 to 15)
filterById only lets through messages from particular MIDIInput identifying it by id property
filterByName only lets through messages from particular MIDIInput identifying it by name property
notes only lets through played notes messages, normalizing noteOff messages to noteOn with 0 velocity
aftertouch only lets through aftertouch messages, same logic goes fow all functions below
modulationWheel
pan
pitchBend
polyphonicAftertouch
programChange
sustainPedal

If you believe other operators could be helpful, please file an issue explaining what would you like to be added and why.

Operators

These are used to convert message to something necessary for you, since it turns MIDIMessageEvents to different objects, use it after all monotype operations from the list above have been applied.

toData — extracts data Uint8Array from each MIDIMessageEvent
toTime — extracts receivedTime timestamp from each MIDIMessageEvent
toStatusByte — extracts first element from data Uint8Array
toDataByte — extracts second element from data Uint8Array
toValueByte — extracts third element from data Uint8Array

Keep in mind some messages might not contain third or even second byte so only use those extractions when you are sure (i.e. filtered the stream to compliant messages beforehand).

Demo

You can try online demo here

Open-source

Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.

ng-web-apis/midi