feat: midi

.github/workflows/build-demo.yml

@@ -11,6 +11,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3.5.2
+        with:
+          fetch-depth: 0
       - name: Setup Node.js and Cache
         uses: ./.github/actions/nodejs
 

.github/workflows/build-prerender.yml

@@ -9,6 +9,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3.5.2
+        with:
+          fetch-depth: 0
       - name: Setup Node.js and Cache
         uses: ./.github/actions/nodejs
 

.github/workflows/build.yml

@@ -11,6 +11,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3.5.2
+        with:
+          fetch-depth: 0
       - name: Setup Node.js and Cache
         uses: ./.github/actions/nodejs
 

.github/workflows/deploy-preview.yml

@@ -12,6 +12,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3.5.2
+        with:
+          fetch-depth: 0
       - name: Setup Node.js and Cache
         uses: ./.github/actions/nodejs
 

.github/workflows/deploy.yml

@@ -9,7 +9,9 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v3.5.2
+        with:
+          fetch-depth: 0
       - name: Setup Node.js and Cache
         uses: ./.github/actions/nodejs
 

.github/workflows/lint.yml

@@ -10,6 +10,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3.5.2
+        with:
+          fetch-depth: 0
       - name: Setup Node.js and Cache
         uses: ./.github/actions/nodejs
 

.github/workflows/test.yml

@@ -11,10 +11,12 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        project: [common, resize-observer, universal, audio, canvas, geolocation]
+        project: [common, resize-observer, universal, audio, canvas, geolocation, intersection-observer, midi]
     name: ${{ matrix.project }}
     steps:
       - uses: actions/checkout@v3.5.2
+        with:
+          fetch-depth: 0
       - name: Setup Node.js and Cache
         uses: ./.github/actions/nodejs
 
@@ -65,6 +67,16 @@ jobs:
           directory: ./coverage/geolocation/
           flags: summary,geolocation
           name: geolocation
+      - uses: codecov/codecov-action@v3.1.3
+        with:
+          directory: ./coverage/midi/
+          flags: summary,midi
+          name: midi
+      - uses: codecov/codecov-action@v3.1.3
+        with:
+          directory: ./coverage/intersection-observer/
+          flags: summary,intersection-observer
+          name: intersection-observer
       - uses: codecov/codecov-action@v3.1.3
         with:
           directory: ./coverage/resize-observer/

apps/demo/src/app/app.routes.ts

@@ -49,6 +49,11 @@ export const appRoutes: Routes = [
                 )
             ).IntersectionObserverPageModule,
     },
+    {
+        path: DemoPath.MidiPage,
+        loadChildren: async () =>
+            (await import(`./pages/midi/midi-page.module`)).MidiPageModule,
+    },
     {
         path: '',
         redirectTo: DemoPath.HomePage,

apps/demo/src/app/constants/demo-path.ts

@@ -7,4 +7,5 @@ export enum DemoPath {
     CanvasPage = `canvas`,
     GeolocationPage = `geolocation`,
     IntersectionObserverPage = `intersection-observer`,
+    MidiPage = `midi`,
 }

apps/demo/src/app/pages/home/home-page.component.html

@@ -101,9 +101,8 @@ <h2>Intersection Observer</h2>
     />
 </a>
 <a
-    href="https://github.com/ng-web-apis/midi"
-    target="_blank"
     class="link"
+    [routerLink]="['/', link.MidiPage]"
     [class.not-supported]="!midiSupport"
 >
     <div>

apps/demo/src/app/pages/midi/adsr.pipe.ts

@@ -0,0 +1,39 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {AudioParamInput} from '@ng-web-apis/audio';
+
+@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',
+              };
+    }
+}

apps/demo/src/app/pages/midi/demo/demo.component.html

@@ -0,0 +1,52 @@
+<ng-container *ngIf="notes$ | async as notes">
+    <ng-container *ngFor="let note of notes | keyvalue; trackBy: noteKey">
+        <ng-container *ngIf="note.value !== null">
+            <ng-container
+                waOscillatorNode
+                detune="5"
+                autoplay
+                [frequency]="note.key | frequency"
+            >
+                <ng-container
+                    waGainNode
+                    gain="0"
+                    [gain]="note.value | adsr: 0:0.1:note.value * 0.8:1"
+                >
+                    <ng-container waAudioDestinationNode></ng-container>
+                </ng-container>
+            </ng-container>
+            <ng-container
+                waOscillatorNode
+                type="sawtooth"
+                autoplay
+                [frequency]="note.key | frequency"
+            >
+                <ng-container
+                    waGainNode
+                    gain="0"
+                    [gain]="note.value | adsr: 0:0.1:note.value * 0.8:1"
+                >
+                    <ng-container
+                        waAudioDestinationNode
+                        (quiet)="onQuiet(note?.key)"
+                    ></ng-container>
+                    <ng-container [waOutput]="convolver"></ng-container>
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    </ng-container>
+    <ng-container
+        #convolver="AudioNode"
+        waConvolverNode
+        [buffer]="response | async"
+    >
+        <ng-container waAudioDestinationNode></ng-container>
+    </ng-container>
+
+    <div
+        *ngFor="let key of octaves"
+        [class]="getClass(notes, key)"
+        (mousedown)="onMouseDown(key)"
+        (touchstart)="onMouseDown(key)"
+    ></div>
+</ng-container>