Web MIDI API is an interesting tool. Even though it has been around for a while now, it is still only supported by Chrome. But that's not gonna stop us from creating a playable synthesizer in Angular. It is time we bring Web Audio API to the next level!

declarative use of Web Audio API in Angular

. Programming music is fun and all but how about actually playing it? There is a standard called MIDI. It's a messaging protocol for electronic instruments data exchange developed back in the 80s. And 

. It means if you have a synthesizer or a MIDI keyboard — you can hook it up to a computer and read what's played in the browser. You can even control other hardware from your machine. Let's learn how to do it the Angular way.

There's not a lot of documentation about it other than the specs. You request access to MIDI devices from 

 and you receive all MIDI inputs and outputs in a 

. Those inputs and outputs (also called ports) act like event targets. Communication is performed through 

 data. Each message is 3 bytes at most. The first one is called a 

. Every number has a particular role like key press or pitch bend. Second and third integers are called 

. In the case of key press second byte tells us what key is pressed and the third one is the velocity (how loud note is played). Full spec is available on the 

 so first step to adopt Web MIDI API would be to convert it to RxJs.

To subscribe to events we first need to get 

 object to reach all inputs. As mentioned before, we request it from 

 as a response. Thankfully, RxJs works with Promises too. We can create an Injection Token using 

 package. This way we are not using global objects directly:

export const MIDI_ACCESS = new InjectionToken<Promise<MIDIAccess>>(
  'Promise for MIDIAccess object',
  {
    providedIn: 'root',
    factory: () => {
      const navigatorRef = inject(NAVIGATOR);

      return navigatorRef.requestMIDIAccess
        ? navigatorRef.requestMIDIAccess()
        : Promise.reject(
            new Error('Web MIDI API is not supported')
          );
    },
  },
);

Now that we have it, we can subscribe to all MIDI events. We can make 

Since in this case there is not much set up required a token would suffice. With a bit of extra code to handle 

 rejection, subscribing to all events would look like this:

export const MIDI_MESSAGES = new InjectionToken<
  Observable<MIDIMessageEvent>
>(
  'All incoming MIDI messages stream',
  {
    providedIn: 'root',
    factory: () =>
      from(inject(MIDI_ACCESS).catch((e: Error) => e)).pipe(
        switchMap(access => access instanceof Error
            ? throwError(access)
            : merge(
                ...Array.from(access.inputs).map(([_, input]) =>
                  fromEvent(
                    input as FromEventTarget<MIDIMessageEvent>,
                    'midimessage',
                  ),
                ),
              ),
        ),
        share(),
      ),
  },
);

We can extract particular MIDI port from 

 in case we want to, say, send an outgoing message. Let's add another token and a prepared provider to do this with ease:

export function outputById(id: string): Provider[] {
    return [
        {
            provide: MIDI_OUTPUT_QUERY,
            useValue: id,
        },
        {
            provide: MIDI_OUTPUT,
            deps: [MIDI_ACCESS, MIDI_OUTPUT_QUERY],
            useFactory: outputByIdFactory,
        },
    ];
}

export function outputByIdFactory(
    midiAccess: Promise<MIDIAccess>,
    id: string,
): Promise<MIDIOutput | undefined> {
    return midiAccess.then(access => access.outputs.get(id));
}

 supports multidimensional array so you can use it as is!

providers: [
  outputById('someId'),
  ANOTHER_TOKEN,
  SomeService,
]

We can add similar helpers to get outputs by name and same goes for inputs

To work with our stream we need to add some custom operators. After all, we shouldn't always analyze raw event data to understand what we're dealing with.

Operators can be roughly broken into two categories: 

. With the first group, we can filter out the stream to events of interest. For example, only listen to played notes or volume sliders. Second group would alter elements for us, like dropping the rest of the event and only deliver data array.

Here's how we can listen to messages only from a given channel (out of 16):

export function filterByChannel(
  channel: number,
): MonoTypeOperatorFunction<MIDIMessageEvent> {
  return source => source.pipe(
    filter(({data}) => data[0] % 16 === channel));
}

The status byte is organized in groups of 16: 128–143 are 

 messages for each of the 16 channels, 144–159 are 

 etc. So if we divide status byte by 16 and get the reminder — we end up with that message's channel. 

If we only care about played notes, we can write the following operator:

export function notes(): MonoTypeOperatorFunction<
  MIDIMessageEvent
> {
  return source =>
    source.pipe(
      filter(({data}) => data[0] >= 128 && data[0] <= 159),
      map(event => {
        if (event.data[0] >= 128 && event.data[0] <= 143) {
          event.data[0] += 16;
          event.data[2] = 0;
        }

        return event;
      }),
    );
}

 messages when you let go of a key. But some send 

 with 0 velocity instead. This operator normalizes behavior to 

 only messages. It shifts the status byte of all 

 messages by 16 and sets the last byte to 0 effectively turning them into 

Now we can chain such operators to get a stream we need:

readonly notes$ = this.messages$.pipe(
  catchError(() => EMPTY),
  notes(),
  toData(),
);

constructor(
  @Inject(MIDI_MESSAGES) 
  private readonly messages$: Observable<MIDIMessageEvent>,
) {}

, we can create a nice sounding synth with just a few directives. Then we need to feed it played notes from the stream we've assembled.

We will use the last code example as a starting point. To have polyphonic synthesizer we need to keep track of all played notes so we will add 

readonly notes$ = this.messages$.pipe(
  catchError(() => EMPTY),
  notes(),
  toData(),
  scan(
    (map, [_, note, volume]) => map.set(note, volume), new Map()
  ),
);

To alter the volume of held keys and to not end sound abruptly when we let go we will create a proper ADSR-pipe (the previous article had a simplified version):

@Pipe({
  name: 'adsr',
})
export class AdsrPipe implements PipeTransform {
  transform(
    value: number,
    attack: number,
    decay: number,
    sustain: number,
    release: number,
  ): AudioParamInput {
    return value
      ? [
          {
            value: 0,
            duration: 0,
            mode: 'instant',
          },
          {
            value,
            duration: attack,
            mode: 'linear',
          },
          {
            value: sustain,
            duration: decay,
            mode: 'linear',
          },
        ]
      : {
          value: 0,
          duration: release,
          mode: 'linear',
        };
    }
}

Now when we press key volume would linearly change from 0 to the level we played it in 

 time. And when we let go it would go down to 0 in 

With this pipe we can throw in a fine synth in the template:

<ng-container
    *ngFor="let note of notes | keyvalue; trackBy: noteKey"
>
    <ng-container
        waOscillatorNode
        detune="5"
        autoplay
        [frequency]="toFrequency(note.key)"
    >
        <ng-container
            waGainNode
            gain="0"
            [gain]="note.value | adsr: 0:0.1:0.02:1"
        >
            <ng-container waAudioDestinationNode></ng-container>
        </ng-container>
    </ng-container>
    <ng-container
        waOscillatorNode
        type="sawtooth"
        autoplay
        [frequency]="toFrequency(note.key)"
    >
        <ng-container
            waGainNode
            gain="0"
            [gain]="note.value | adsr: 0:0.1:0.02:1"
        >
            <ng-container waAudioDestinationNode></ng-container>
            <ng-container [waOutput]="convolver"></ng-container>
        </ng-container>
    </ng-container>
</ng-container>
<ng-container
    #convolver="AudioNode"
    waConvolverNode
    buffer="assets/audio/response.wav"
>
    <ng-container waAudioDestinationNode></ng-container>
</ng-container>

We iterate over accumulated notes with built-in 

 pipe tracking items by played key. Then we have 2 oscillators playing those frequencies. And at the end — a reverberation effect with 

. Pretty basic setup and not a lot of code, but it gives us a playable instrument with rich sound. You can go ahead and give it a try in our interactive demo below.

, so to play your instrument head to dedicated link: 

I included mouse interaction for those who do not have a MIDI controller connected

In Angular, we are used to working with events using RxJs. And Web MIDI API is not much different from regular events. With some architectural decisions and tokens, we managed to use MIDI in an Angular app. The solution we created is available as 

 open-source package. It focuses mostly on receiving events. If you see something that is missing like a helper function or another operator — feel free to 

This library is a part of a bigger project called 

 — an initiative to create lightweight, high-quality wrappers of native APIs for idiomatic use with Angular. So if you want to try 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Jam on your MIDI keyboard in Angular </h1><div data-node-type="summary" class="summary-block">Web MIDI API is an interesting tool. Even though it has been around for a while now, it is still only supported by Chrome. But that's not gonna stop us from creating a playable synthesizer in Angular. It is time we bring Web Audio API to the next level!</div><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200407210918145_Y_K4aCZFlKs.jpg" attachmentid="7eff860f-8088-4d1c-952a-76d4b1296ffb" contenteditable="false" data-width="1190" data-height="1028"><div></div></figure><p>Previously, we spoke about <a href="https://www.newline.co/@waterplea/writing-retrowave-in-angular--20856fee" rel="noopener noreferrer nofollow">declarative use of Web Audio API in Angular</a>. Programming music is fun and all but how about actually playing it? There is a standard called MIDI. It's a messaging protocol for electronic instruments data exchange developed back in the 80s. And <strong>Chrome supports it natively</strong>. It means if you have a synthesizer or a MIDI keyboard — you can hook it up to a computer and read what's played in the browser. You can even control other hardware from your machine. Let's learn how to do it the Angular way.</p><h1><a name="web-midi-api">Web MIDI API</a></h1><p>There's not a lot of documentation about it other than the specs. You request access to MIDI devices from <code>navigator</code> and you receive all MIDI inputs and outputs in a <code>Promise</code>. Those inputs and outputs (also called ports) act like event targets. Communication is performed through <code>MIDIMessageEvents</code> which carry <code>Uint8Array</code> data. Each message is 3 bytes at most. The first one is called a <em>status byte</em>. Every number has a particular role like key press or pitch bend. Second and third integers are called <em>data bytes</em>. In the case of key press second byte tells us what key is pressed and the third one is the velocity (how loud note is played). Full spec is available on the <a href="https://www.midi.org/specifications-old/item/table-2-expanded-messages-list-status-bytes" rel="noopener noreferrer nofollow">official MIDI website</a>. In Angular we handle events with <code>Observables</code> so first step to adopt Web MIDI API would be to convert it to RxJs.</p><h1><a name="dependency-injection">Dependency Injection</a></h1><p>To subscribe to events we first need to get <code>MIDIAccess</code> object to reach all inputs. As mentioned before, we request it from <code>navigator</code> and we get a <code>Promise</code> as a response. Thankfully, RxJs works with Promises too. We can create an Injection Token using <code>NAVIGATOR</code>  from <a href="https://github.com/ng-web-apis/common" rel="noopener noreferrer nofollow">@ng-web-apis/common</a> package. This way we are not using global objects directly:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-Uyxff" id="cm-Uyxff">export const MIDI_ACCESS = new InjectionToken&lt;Promise&lt;MIDIAccess&gt;&gt;(
  'Promise for MIDIAccess object',
  {
    providedIn: 'root',
    factory: () =&gt; {
      const navigatorRef = inject(NAVIGATOR);

      return navigatorRef.requestMIDIAccess
        ? navigatorRef.requestMIDIAccess()
        : Promise.reject(
            new Error('Web MIDI API is not supported')
          );
    },
  },
);</textarea><p>Now that we have it, we can subscribe to all MIDI events. We can make <code>Observable</code> two ways:</p><ol><li><p>Create a service that extends <code>Observable</code> like we did in <a href="https://indepth.dev/what-makes-a-good-angular-library/" rel="noopener noreferrer nofollow">Intersection Observer API</a></p></li><li><p>Create a token with a factory that would map this <code>Promise</code> to <code>Observable</code> of events</p></li></ol><p>Since in this case there is not much set up required a token would suffice. With a bit of extra code to handle <code>Promise</code> rejection, subscribing to all events would look like this:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-t5Blk" id="cm-t5Blk">export const MIDI_MESSAGES = new InjectionToken&lt;
  Observable&lt;MIDIMessageEvent&gt;
&gt;(
  'All incoming MIDI messages stream',
  {
    providedIn: 'root',
    factory: () =&gt;
      from(inject(MIDI_ACCESS).catch((e: Error) =&gt; e)).pipe(
        switchMap(access =&gt; access instanceof Error
            ? throwError(access)
            : merge(
                ...Array.from(access.inputs).map(([_, input]) =&gt;
                  fromEvent(
                    input as FromEventTarget&lt;MIDIMessageEvent&gt;,
                    'midimessage',
                  ),
                ),
              ),
        ),
        share(),
      ),
  },
);</textarea><p>We can extract particular MIDI port from <code>MIDIAccess</code> in case we want to, say, send an outgoing message. Let's add another token and a prepared provider to do this with ease:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-t5cMt" id="cm-t5cMt">export function outputById(id: string): Provider[] {
    return [
        {
            provide: MIDI_OUTPUT_QUERY,
            useValue: id,
        },
        {
            provide: MIDI_OUTPUT,
            deps: [MIDI_ACCESS, MIDI_OUTPUT_QUERY],
            useFactory: outputByIdFactory,
        },
    ];
}

export function outputByIdFactory(
    midiAccess: Promise&lt;MIDIAccess&gt;,
    id: string,
): Promise&lt;MIDIOutput | undefined&gt; {
    return midiAccess.then(access =&gt; access.outputs.get(id));
}</textarea><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>Did you know you don't need to spread <code>Provider[]</code> when you use it in metadata? <code>providers</code> section of <code>@Directive</code> supports multidimensional array so you can use it as is!</p></div></div><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-5zY6B" id="cm-5zY6B">providers: [
  outputById('someId'),
  ANOTHER_TOKEN,
  SomeService,
]</textarea><blockquote><p>We can add similar helpers to get outputs by name and same goes for inputs</p></blockquote><h1><a name="operators">Operators</a></h1><p>To work with our stream we need to add some custom operators. After all, we shouldn't always analyze raw event data to understand what we're dealing with.</p><p>Operators can be roughly broken into two categories: <strong>monotype</strong> and <strong>mapping</strong>. With the first group, we can filter out the stream to events of interest. For example, only listen to played notes or volume sliders. Second group would alter elements for us, like dropping the rest of the event and only deliver data array.</p><p>Here's how we can listen to messages only from a given channel (out of 16):</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-q3hCf" id="cm-q3hCf">export function filterByChannel(
  channel: number,
): MonoTypeOperatorFunction&lt;MIDIMessageEvent&gt; {
  return source =&gt; source.pipe(
    filter(({data}) =&gt; data[0] % 16 === channel));
}</textarea><p>The status byte is organized in groups of 16: 128–143 are <strong>noteOff</strong> messages for each of the 16 channels, 144–159 are <strong>noteOn,</strong> etc. So if we divide status byte by 16 and get the reminder — we end up with that message's channel. </p><p>If we only care about played notes, we can write the following operator:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-W8XsD" id="cm-W8XsD">export function notes(): MonoTypeOperatorFunction&lt;
  MIDIMessageEvent
&gt; {
  return source =&gt;
    source.pipe(
      filter(({data}) =&gt; data[0] &gt;= 128 &amp;&amp; data[0] &lt;= 159),
      map(event =&gt; {
        if (event.data[0] &gt;= 128 &amp;&amp; event.data[0] &lt;= 143) {
          event.data[0] += 16;
          event.data[2] = 0;
        }

        return event;
      }),
    );
}</textarea><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>Some MIDI controllers send explicit <strong>noteOff</strong> messages when you let go of a key. But some send <strong>noteOn</strong> with 0 velocity instead. This operator normalizes behavior to <strong>noteOn</strong> only messages. It shifts the status byte of all <strong>noteOff</strong> messages by 16 and sets the last byte to 0 effectively turning them into <strong>noteOn</strong> messages of 0 velocity.</p></div></div><p>Now we can chain such operators to get a stream we need:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-mbEYO" id="cm-mbEYO">readonly notes$ = this.messages$.pipe(
  catchError(() =&gt; EMPTY),
  notes(),
  toData(),
);

constructor(
  @Inject(MIDI_MESSAGES) 
  private readonly messages$: Observable&lt;MIDIMessageEvent&gt;,
) {}</textarea><p>Time put all this to work!</p><h1><a name="playable-synth">Playable synth</a></h1><p>With a little help from our <a href="https://github.com/ng-web-apis/audio" rel="noopener noreferrer nofollow">Web Audio API library</a> discussed in my <a href="https://www.newline.co/@waterplea/writing-retrowave-in-angular--20856fee" rel="noopener noreferrer nofollow">previous article</a>, we can create a nice sounding synth with just a few directives. Then we need to feed it played notes from the stream we've assembled.</p><p>We will use the last code example as a starting point. To have polyphonic synthesizer we need to keep track of all played notes so we will add <code>scan</code> to our chain:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-NvWm0" id="cm-NvWm0">readonly notes$ = this.messages$.pipe(
  catchError(() =&gt; EMPTY),
  notes(),
  toData(),
  scan(
    (map, [_, note, volume]) =&gt; map.set(note, volume), new Map()
  ),
);</textarea><p>To alter the volume of held keys and to not end sound abruptly when we let go we will create a proper ADSR-pipe (the previous article had a simplified version):</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-Ktrql" id="cm-Ktrql">@Pipe({
  name: 'adsr',
})
export class AdsrPipe implements PipeTransform {
  transform(
    value: number,
    attack: number,
    decay: number,
    sustain: number,
    release: number,
  ): AudioParamInput {
    return value
      ? [
          {
            value: 0,
            duration: 0,
            mode: 'instant',
          },
          {
            value,
            duration: attack,
            mode: 'linear',
          },
          {
            value: sustain,
            duration: decay,
            mode: 'linear',
          },
        ]
      : {
          value: 0,
          duration: release,
          mode: 'linear',
        };
    }
}</textarea><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>Now when we press key volume would linearly change from 0 to the level we played it in <strong>attack</strong> time. Then it would fall to <strong>sustain</strong> level in <strong>decay</strong> time. And when we let go it would go down to 0 in <strong>release</strong> time.</p></div></div><p>With this pipe we can throw in a fine synth in the template:</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-A1LrQ" id="cm-A1LrQ">&lt;ng-container
    *ngFor="let note of notes | keyvalue; trackBy: noteKey"
&gt;
    &lt;ng-container
        waOscillatorNode
        detune="5"
        autoplay
        [frequency]="toFrequency(note.key)"
    &gt;
        &lt;ng-container
            waGainNode
            gain="0"
            [gain]="note.value | adsr: 0:0.1:0.02:1"
        &gt;
            &lt;ng-container waAudioDestinationNode&gt;&lt;/ng-container&gt;
        &lt;/ng-container&gt;
    &lt;/ng-container&gt;
    &lt;ng-container
        waOscillatorNode
        type="sawtooth"
        autoplay
        [frequency]="toFrequency(note.key)"
    &gt;
        &lt;ng-container
            waGainNode
            gain="0"
            [gain]="note.value | adsr: 0:0.1:0.02:1"
        &gt;
            &lt;ng-container waAudioDestinationNode&gt;&lt;/ng-container&gt;
            &lt;ng-container [waOutput]="convolver"&gt;&lt;/ng-container&gt;
        &lt;/ng-container&gt;
    &lt;/ng-container&gt;
&lt;/ng-container&gt;
&lt;ng-container
    #convolver="AudioNode"
    waConvolverNode
    buffer="assets/audio/response.wav"
&gt;
    &lt;ng-container waAudioDestinationNode&gt;&lt;/ng-container&gt;
&lt;/ng-container&gt;</textarea><p>We iterate over accumulated notes with built-in <code>keyvalue</code> pipe tracking items by played key. Then we have 2 oscillators playing those frequencies. And at the end — a reverberation effect with <code>ConvolverNode</code>. Pretty basic setup and not a lot of code, but it gives us a playable instrument with rich sound. You can go ahead and give it a try in our interactive demo below.</p><div data-panel-type="warning" data-panel-position="inline" class="panel panel-type-warning panel-position-inline"><div class="panel-container lolwut"><p>MIDI access will not be allowed in an <code>iframe</code>, so to play your instrument head to dedicated link: <a href="https://angular-midi.stackblitz.io/" rel="noopener noreferrer nofollow">https://angular-midi.stackblitz.io/</a></p></div></div><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fstackblitz.com%2Fedit%2Fangular-midi%3Fembed%3D1%26view%3Dpreview&amp;display_name=StackBlitz&amp;url=https%3A%2F%2Fstackblitz.com%2Fedit%2Fangular-midi%3Fembed%3D1%26view%3Dpreview&amp;image=https%3A%2F%2Fc.staticblitz.com%2Fassets%2Ficon-664493542621427cc8adae5e8f50d632f87aaa6ea1ce5b01e9a3d05b57940a9f.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=stackblitz" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>I included mouse interaction for those who do not have a MIDI controller connected</p></div></div><h1><a name="conclusion">Conclusion</a></h1><p>In Angular, we are used to working with events using RxJs. And Web MIDI API is not much different from regular events. With some architectural decisions and tokens, we managed to use MIDI in an Angular app. The solution we created is available as <a href="https://github.com/ng-web-apis/midi" rel="noopener noreferrer nofollow">@ng-web-apis/midi</a> open-source package. It focuses mostly on receiving events. If you see something that is missing like a helper function or another operator — feel free to <a href="https://github.com/ng-web-apis/midi/issues" rel="noopener noreferrer nofollow">open an issue</a>.</p><p>This library is a part of a bigger project called <strong>Web APIs for Angular</strong> — an initiative to create lightweight, high-quality wrappers of native APIs for idiomatic use with Angular. So if you want to try <a href="https://indepth.dev/declarative-internet-shopping-with-payment-request-api-and-angular" rel="noopener noreferrer nofollow">Payment Request API</a> or need a declarative <a href="https://indepth.dev/what-makes-a-good-angular-library" rel="noopener noreferrer nofollow">Intersection Observer</a> — you are very welcome to browse <a href="https://ng-web-apis.github.io" rel="noopener noreferrer nofollow">all our releases so far</a>.</p><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Jam on your MIDI keyboard in Angular

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript