An Observable based library for the use of Web MIDI API with Angular
Attention! This repository is archived and the library has been moved to tinkoff/ng-web-apis monorepository
Part of Web APIs for Angular
This library contains abstractions and helpful utils to use Web MIDI API idiomatically with Angular.
If you do not have @ng-web-apis/common:
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
To use Web MIDI API with your Angular application you can use tokens, RxJs operators and utils included with this package:
MIDI_SUPPORT
— boolean
value checking browser supportSYSEX
— boolean
token responsible for system exclusive access, false
by defaultMIDI_ACCESS
— a Promise
with MIDIAccess object,
depends on SYSEX
token for access levelMIDI_INPUT
— a Promise
with MIDIInput. You would need to
provide it yourself see utility functions belowMIDI_OUTPUT
— a Promise
with MIDIOutput. You would need to
provide it yourself see utility functions belowMIDI_MESSAGES
— an Observable of MIDIMessageEvent
from all MIDIInputs,
use rxjs function below to narrow and process the streamYou 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>,
) {}
}
toFrequency
and toNote
functions.
They optionally accept second argument for tuning of middle A note using 440 as default valuefrequency
pipe from FrequencyPipeModule
to convert MIDI note to frequency
directly in templateThese 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
propertyfilterByName
only lets through messages from particular
MIDIInput
identifying it by name
propertynotes
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 belowmodulationWheel
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.
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).
You can try online demo here
Other Web APIs for Angular by @ng-web-apis
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.