taiga-family
Web MIDI API for Angular
This library contains abstractions and helpful utils to use Web MIDI API idiomatically with Angular.
Install
If you do not have @ng-web-apis/common:
npm i @ng-web-apis/commonYou would also need @types/webmidi package until it is included in TypeScript. Now install the package:
npm i @ng-web-apis/midiUsage
To use Web MIDI API with your Angular application you can use tokens, RxJs operators and utils included with this package:
Tokens
MIDI_SUPPORT—booleanvalue checking browser supportSYSEX—booleantoken responsible for system exclusive access,falseby defaultMIDI_ACCESS— a Promise with MIDIAccess object, depends onSYSEXtoken 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 stream
Utility functions
You can provide
MIDI_INPUTandMIDI_OUTPUTtokens 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 Example {
constructor(@Inject(MIDI_INPUT) input: Promise<MIDIInput>, @Inject(MIDI_OUTPUT) output: Promise<MIDIOutput>) {}
}- You can convert MIDI note to frequency and back using
toFrequencyandtoNotefunctions. They optionally accept second argument for tuning of middle A note using 440 as default value - You can use
frequencypipe fromFrequencyPipeModuleto 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());filterByChannelonly lets through messages from given channel (0 to 15)filterByIdonly lets through messages from particular MIDIInput identifying it byidpropertyfilterByNameonly lets through messages from particular MIDIInput identifying it bynamepropertynotesonly lets through played notes messages, normalizing noteOff messages to noteOn with 0 velocityaftertouchonly lets through aftertouch messages, same logic goes fow all functions belowmodulationWheelpanpitchBendpolyphonicAftertouchprogramChangesustainPedal
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— extractsdataUint8Array from each MIDIMessageEventtoTime— extractsreceivedTimetimestamp from each MIDIMessageEventtoStatusByte— extracts first element fromdataUint8ArraytoDataByte— extracts second element fromdataUint8ArraytoValueByte— extracts third element fromdataUint8Array
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
See also
Other Web APIs for Angular by @ng-web-apis