TypeScript icon, indicating that this package has built-in type declarations

4.1.3 • Public • Published

ng-web-apis logo Web MIDI API for Angular

npm version npm bundle size codecov

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_SUPPORTboolean value checking browser support
  • SYSEXboolean 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';

  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 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.


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.

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

See also

Other Web APIs for Angular by @ng-web-apis

Package Sidebar


npm i @ng-web-apis/midi

Weekly Downloads






Unpacked Size

134 kB

Total Files


Last publish


  • marsibarsi
  • waterplea
  • vladimir.potekhin
  • defenderbass