Repository files navigation

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

Part ofWeb APIs for Angular

This library contains abstractions and helpful utils to useWeb 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 useWeb MIDI API with your Angular application you canuse tokens, RxJs operators and utils included with this package:

• MIDI_SUPPORT —boolean value checking browser support
• SYSEX —boolean token responsible for system exclusive access,false by default
• MIDI_ACCESS — aPromisewithMIDIAccess object,depends onSYSEX token for access level
• MIDI_INPUT — aPromisewithMIDIInput. You would need toprovide it yourself see utility functions below
• MIDI_OUTPUT — aPromisewithMIDIOutput. You would need toprovide it yourself see utility functions below
• MIDI_MESSAGES — an Observable ofMIDIMessageEventfrom allMIDIInputs,use rxjs function below to narrow and process the stream

• You can provideMIDI_INPUT andMIDI_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')],})exportclassMyComponent{constructor(        @Inject(MIDI_INPUT)input:Promise<MIDIInput>,        @Inject(MIDI_OUTPUT)output:Promise<MIDIOutput>,){}}

• You can convert MIDI note to frequency and back usingtoFrequency andtoNote functions.They optionally accept second argument for tuning of middle A note using 440 as default value
• You can usefrequency pipe fromFrequencyPipeModule to convert MIDI note to frequencydirectly in template

These are filtering operators which you can use onMIDI_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 particularMIDIInputidentifying it byid property
• filterByName only lets through messages from particularMIDIInputidentifying it byname 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, pleasefile an issue explaining whatwould you like to be added and why.

These are used to convert message to something necessary for you, since it turnsMIDIMessageEventsto different objects, use itafter all monotype operations from the list abovehave been applied.

• toData — extractsdataUint8Arrayfrom eachMIDIMessageEvent
• toTime — extractsreceivedTime timestamp from eachMIDIMessageEvent
• toStatusByte — extracts first element fromdataUint8Array
• toDataByte — extracts second element fromdataUint8Array
• toValueByte — extracts third element fromdataUint8Array

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

You cantry online demo here

OtherWeb APIs for Angular by@ng-web-apis

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