ng-web-apis/midi


An Observable based library for the use of Web MIDI API with Angular

https://ng-web-apis.github.io/midi

License: MIT

Language: TypeScript

Keywords: angular, audio, midi, webaudio, webmidi, webmidi-api, webmidiapi


ng-web-apis logo Web MIDI API for Angular

Part of Web APIs for Angular

npm version npm bundle size Travis (.com) Coveralls github angular-open-source-starter

This library contains abstraction 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/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_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';

@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

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.

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

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.

Project Statistics

Sourcerank 3
Repository Size 1.44 MB
Stars 2
Forks 0
Watchers 2
Open issues 0
Dependencies 1,185
Contributors 1
Tags 2
Created
Last updated
Last pushed

Top Contributors See all

Alex Inkin

Packages Referencing this Repo

@ng-web-apis/midi
An Observable based library for the use of Web MIDI API with Angular
Latest release 1.0.1 - Updated - 2 stars

Recent Tags See all

v1.0.1 February 11, 2020
v1.0.0 February 10, 2020

Something wrong with this page? Make a suggestion

Last synced: 2020-02-11 08:38:39 UTC

Login to resync this repository