feat: midi

taiga-family · May 4, 2023 · 9918bc8 · 9918bc8
1 parent 32fd540
commit 9918bc8
Show file tree

Hide file tree

Showing 99 changed files with 2,231 additions and 52 deletions.
diff --git a/.github/workflows/build-demo.yml b/.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
 

diff --git a/.github/workflows/build-prerender.yml b/.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
 

diff --git a/.github/workflows/build.yml b/.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
 

diff --git a/.github/workflows/deploy-preview.yml b/.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
 

diff --git a/.github/workflows/deploy.yml b/.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
 

diff --git a/.github/workflows/lint.yml b/.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
 

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -15,6 +15,8 @@ jobs:
     name: ${{ matrix.project }}
     steps:
       - uses: actions/checkout@v3.5.2
+        with:
+          fetch-depth: 0
       - name: Setup Node.js and Cache
         uses: ./.github/actions/nodejs
 

diff --git a/apps/demo/src/app/app.routes.ts b/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,

diff --git a/apps/demo/src/app/constants/demo-path.ts b/apps/demo/src/app/constants/demo-path.ts
@@ -7,4 +7,5 @@ export enum DemoPath {
     CanvasPage = `canvas`,
     GeolocationPage = `geolocation`,
     IntersectionObserverPage = `intersection-observer`,
+    MidiPage = `midi`,
 }
diff --git a/apps/demo/src/app/pages/home/home-page.component.html b/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>

diff --git a/apps/demo/src/app/pages/midi/adsr.pipe.ts b/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',
+              };
+    }
+}
diff --git a/apps/demo/src/app/pages/midi/demo/demo.component.html b/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>