# @ng-web-apis/midi > An Observable based library for the use of Web MIDI API with Angular Latest version **5.4.0** (published 2026-09-29) · Apache-2.0 license · 2.6K weekly downloads ## Install ```sh npm install @ng-web-apis/midi pnpm add @ng-web-apis/midi yarn add @ng-web-apis/midi bun add @ng-web-apis/midi ``` ## Health **Score 80/100 (A)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; growing popularity. ## Facts | | | |---|---| | Version | 5.4.0 | | Published | 2026-09-29 | | First published | 2020-02-10 | | Weekly downloads | 2.6K | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 66.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 826 | | Author | Alexander Inkin | | Maintainers | marsibarsi, waterplea, vladimir.potekhin, defenderbass | | Keywords | angular, ng, midi, audio, music, synth, keyboard | ## Links - npm: https://www.npmjs.com/package/@ng-web-apis/midi - Repository: https://github.com/taiga-family/ng-web-apis - Homepage: https://github.com/taiga-family/ng-web-apis/blob/main/libs/midi/README.md - Issues: https://github.com/taiga-family/ng-web-apis/issues - npm.io page: https://npm.io/package/@ng-web-apis/midi ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^2.3.0 ## Alternatives - [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads - [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads - [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads - [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads - [electron-installer-squirrel-windows](https://npm.io/package/electron-installer-squirrel-windows.md) — 47 weekly downloads ## Recent versions - 5.4.0 (latest) — 2026-09-29 - 4.15.0 (v4-lts) — 2026-09-29 - 3.2.3 (v3-lts) — 2024-08-03 - 4.14.1 — 2026-06-09 - 5.3.0 — 2026-05-18 - 5.2.0 — 2026-03-23 - 5.0.4 — 2026-03-23 - 5.1.0 — 2026-02-05 - 5.0.3 — 2026-01-13 - 5.0.2 — 2025-12-25 - 5.0.1 — 2025-12-19 - 5.0.0 — 2025-12-19 - 4.14.0 — 2025-12-19 - 4.12.2 — 2025-10-06 - 4.12.0 — 2025-03-31 - … 38 more at https://npm.io/package/@ng-web-apis/midi/versions ## README # ![ng-web-apis logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/midi/logo.svg) Web MIDI API for Angular [![npm version](https://img.shields.io/npm/v/@ng-web-apis/midi.svg)](https://npmjs.com/package/@ng-web-apis/midi) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/midi)](https://bundlephobia.com/result?p=@ng-web-apis/midi) [![codecov](https://codecov.io/github/taiga-family/ng-web-apis/graph/badge.svg?flag=midi)](https://codecov.io/github/taiga-family/ng-web-apis/tree/main/libs/midi) This library contains abstractions and helpful utils to use [Web MIDI API](https://www.w3.org/TR/webmidi) idiomatically with Angular. ## Install If you do not have [@ng-web-apis/common](https://github.com/taiga-family/ng-web-apis/tree/main/libs/common): ```bash npm i @ng-web-apis/common ``` You would also need `@types/webmidi` package until it is included in TypeScript. Now install the package: ```bash npm i @ng-web-apis/midi ``` ## Usage To use [Web MIDI API](https://www.w3.org/TR/webmidi) with your Angular application you can use tokens, RxJs operators and utils included with this package: ### Tokens - `WA_MIDI_SUPPORT` — `boolean` value checking browser support - `WA_SYSEX` — `boolean` token responsible for system exclusive access, `false` by default - `WA_MIDI_ACCESS` — a [Promise](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) with [MIDIAccess](https://developer.mozilla.org/en-US/docs/Web/API/MIDIAccess) object, depends on `WA_SYSEX` token for access level - `WA_MIDI_INPUT` — a [Promise](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) with [MIDIInput](https://developer.mozilla.org/en-US/docs/Web/API/MIDIInput). You would need to provide it yourself see utility functions below - `WA_MIDI_OUTPUT` — a [Promise](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) with [MIDIOutput](https://developer.mozilla.org/en-US/docs/Web/API/MIDIOutput). You would need to provide it yourself see utility functions below - `WA_MIDI_MESSAGES` — an Observable of [MIDIMessageEvent](https://developer.mozilla.org/en-US/docs/Web/API/MIDIMessageEvent) from all [MIDIInputs](https://developer.mozilla.org/en-US/docs/Web/API/MIDIInput), use rxjs function below to narrow and process the stream ### Utility functions - You can provide `WA_MIDI_INPUT` and `WA_MIDI_OUTPUT` tokens with following functions: `inputById`, `inputByName`, `outputById`, `outputByName`: ```ts import {Component, Inject} from '@angular/core'; import {inputById, WA_MIDI_INPUT, WA_MIDI_OUTPUT, outputByName} from '@ng-web-apis/midi'; @Component({ selector: 'my-comp', template: '...', providers: [inputById('input-0'), outputByName('VirtualMIDISynth')], }) export class Example { constructor(@Inject(WA_MIDI_INPUT) input: Promise, @Inject(WA_MIDI_OUTPUT) output: Promise) {} } ``` - 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 `WA_MIDI_MESSAGES` stream to narrow it to your needs. All of them are applied like that: ```ts messages$.pipe(filterByChannel(1), aftertouch()); ``` - `filterByChannel` only lets through messages from given channel **(0 to 15)** - `filterById` only lets through messages from particular [MIDIInput](https://developer.mozilla.org/en-US/docs/Web/API/MIDIInput) identifying it by `id` property - `filterByName` only lets through messages from particular [MIDIInput](https://developer.mozilla.org/en-US/docs/Web/API/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](https://github.com/taiga-family/ng-web-apis/issues) 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](https://developer.mozilla.org/en-US/docs/Web/API/MIDIMessageEvent) to different objects, use it **after** all monotype operations from the list above have been applied. - `toData` — extracts `data` [Uint8Array](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) from each [MIDIMessageEvent](https://developer.mozilla.org/en-US/docs/Web/API/MIDIMessageEvent) - `toTime` — extracts `receivedTime` timestamp from each [MIDIMessageEvent](https://developer.mozilla.org/en-US/docs/Web/API/MIDIMessageEvent) - `toStatusByte` — extracts first element from `data` [Uint8Array](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) - `toDataByte` — extracts second element from `data` [Uint8Array](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) - `toValueByte` — extracts third element from `data` [Uint8Array](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/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). ## Demo You can [try online demo here](https://stackblitz.com/github/ng-web-apis/midi/tree/master/projects/demo) ## See also Other [Web APIs for Angular](https://taiga-family.github.io/ng-web-apis/) by [@ng-web-apis](https://github.com/taiga-family/ng-web-apis) --- _Source: https://npm.io/package/@ng-web-apis/midi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._