feat: speech (#87)

Co-authored-by: splincode <>

.github/workflows/test.yml

@@ -24,6 +24,7 @@ jobs:
             mutation-observer,
             payment-request,
             permissions,
+            speech,
           ]
     name: ${{ matrix.project }}
     steps:
@@ -110,6 +111,11 @@ jobs:
           directory: ./coverage/permissions/
           flags: summary,permissions
           name: permissions
+      - uses: codecov/codecov-action@v3.1.3
+        with:
+          directory: ./coverage/speech/
+          flags: summary,speech
+          name: speech
 
 concurrency:
   group: test-${{ github.workflow }}-${{ github.ref }}

apps/demo/project.json

@@ -20,7 +20,12 @@
                 "main": "apps/demo/src/main.ts",
                 "polyfills": "apps/demo/src/polyfills.ts",
                 "tsConfig": "apps/demo/tsconfig.app.json",
-                "styles": ["apps/demo/src/styles.css"],
+                "styles": [
+                    "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+                    "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
+                    "node_modules/@taiga-ui/styles/taiga-ui-global.less",
+                    "apps/demo/src/styles.css"
+                ],
                 "assets": [
                     {
                         "glob": "**/*",

apps/demo/src/app/app.browser.module.ts

@@ -5,15 +5,18 @@ import {AppRoutingModule} from './app.routes';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {HighlightModule, HIGHLIGHT_OPTIONS} from 'ngx-highlightjs';
 import {LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {TUI_ICONS_PATH, tuiIconsPathFactory, TuiRootModule} from '@taiga-ui/core';
 
 @NgModule({
     imports: [
         AppRoutingModule,
         HighlightModule,
+        TuiRootModule,
         BrowserAnimationsModule,
         BrowserModule.withServerTransition({
             appId: 'demo',
         }),
+        TuiRootModule,
     ],
     declarations: [AppComponent],
     bootstrap: [AppComponent],
@@ -26,6 +29,10 @@ import {LocationStrategy, PathLocationStrategy} from '@angular/common';
             provide: LocationStrategy,
             useClass: PathLocationStrategy,
         },
+        {
+            provide: TUI_ICONS_PATH,
+            useValue: tuiIconsPathFactory('assets/taiga-ui/icons/'),
+        },
     ],
 })
 export class AppBrowserModule {}

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

@@ -1,28 +1,32 @@
-<header>
-    <img
-        routerLink="/"
-        src="assets/images/web-api.svg"
-        width="128"
-        height="128"
-        alt="Web APIs logo"
-        class="logo"
-    />
-    <div>
-        <h1>Web APIs for Angular</h1>
-        <section>
-            High quality lightweight wrappers for native Web APIs for idiomatic
-            use with Angular
-        </section>
-    </div>
-</header>
-<main>
-    <router-outlet></router-outlet>
-</main>
-<footer>
-    Icons made by
-    <a href="https://www.flaticon.com/authors/freepik" title="Freepik">
-        Freepik
-    </a>
-    from
-    <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
-</footer>
+<tui-root>
+    <header>
+        <img
+            routerLink="/"
+            src="assets/images/web-api.svg"
+            width="128"
+            height="128"
+            alt="Web APIs logo"
+            class="logo"
+        />
+        <div>
+            <h1>Web APIs for Angular</h1>
+            <section>
+                High quality lightweight wrappers for native Web APIs for
+                idiomatic use with Angular
+            </section>
+        </div>
+    </header>
+    <main>
+        <router-outlet></router-outlet>
+    </main>
+    <footer>
+        Icons made by
+        <a href="https://www.flaticon.com/authors/freepik" title="Freepik">
+            Freepik
+        </a>
+        from
+        <a href="https://www.flaticon.com/" title="Flaticon">
+            www.flaticon.com
+        </a>
+    </footer>
+</tui-root>

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

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

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

@@ -5,6 +5,7 @@ export enum DemoPath {
     AudioPage = `audio`,
     ResizeObserverPage = `resize-observer`,
     CanvasPage = `canvas`,
+    SpeechPage = `speech`,
     GeolocationPage = `geolocation`,
     IntersectionObserverPage = `intersection-observer`,
     MutationObserverPage = `mutation-observer`,

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

@@ -190,7 +190,7 @@ <h2>Resize Observer</h2>
         class="icon"
     />
 </a>
-<a href="https://github.com/ng-web-apis/speech" target="_blank" class="link">
+<a class="link" [routerLink]="['/', link.SpeechPage]">
     <div>
         <h2>Speech</h2>
         A library for comfortable use of

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

@@ -0,0 +1,103 @@
+<label class="recognition" [tuiLabel]="label">
+    <ng-template #label>
+        Speech recognition
+        <tui-tooltip
+            content="Say «Ok, Angular» to start recording and «Thank you, Angular» to end"
+        ></tui-tooltip>
+    </ng-template>
+    <ng-container *ngIf="record$ | async as result; else placeholder">
+        <span
+            *ngFor="let result of result"
+            class="transcript"
+            [class.transcript_final]="result.isFinal"
+        >
+            {{ result[0].transcript }}
+        </span>
+        &nbsp;
+    </ng-container>
+    <ng-template #placeholder>Say «Ok, Angular»...</ng-template>
+</label>
+<tui-select [valueContent]="nameExtractor" [(ngModel)]="voice">
+    Voice
+    <tui-data-list *tuiDataList>
+        <button
+            *ngFor="let item of voices$ | async; trackBy: voiceByName"
+            tuiOption
+            [value]="item"
+        >
+            {{ item.name }}
+        </button>
+    </tui-data-list>
+</tui-select>
+<tui-text-area
+    class="textarea"
+    [waTextToSpeech]="text | waUtterance: options"
+    [waTextToSpeechPaused]="paused"
+    [(ngModel)]="text"
+    (waTextToSpeechEnd)="onEnd()"
+>
+    Text
+</tui-text-area>
+<div class="buttons">
+    <button tuiButton type="button" (click)="onClick()">
+        {{ paused ? 'Play' : 'Pause' }}
+    </button>
+    Tip: say «Show sidebar»
+</div>
+
+<div *tuiSidebar="(open$ | async) || false">
+    <div class="sidebar">
+        <h2>More from @ng-web-apis</h2>
+
+        <a
+            href="https://github.com/ng-web-apis/workers"
+            target="_blank"
+            class="link"
+        >
+            <h3>Workers</h3>
+            <img
+                src="https://ng-web-apis.github.io/dist/assets/images/workers.svg"
+                width="64"
+                height="64"
+                alt="Worker API logo"
+                class="icon"
+            />
+        </a>
+
+        <a
+            href="https://github.com/ng-web-apis/canvas"
+            target="_blank"
+            class="link"
+        >
+            <h3>Canvas</h3>
+            <img
+                src="https://ng-web-apis.github.io/dist/assets/images/canvas.svg"
+                width="64"
+                height="64"
+                alt="Worker API logo"
+                class="icon"
+            />
+        </a>
+
+        <a
+            href="https://github.com/ng-web-apis/audio"
+            target="_blank"
+            class="link"
+        >
+            <h3>Audio</h3>
+            <img
+                src="https://ng-web-apis.github.io/dist/assets/images/audio.svg"
+                width="64"
+                height="64"
+                alt="Worker API logo"
+                class="icon"
+            />
+        </a>
+
+        <a href="https://ng-web-apis.github.io/" target="_blank" class="link">
+            See all
+        </a>
+
+        Tip: say «Hide sidebar» when you're done
+    </div>
+</div>

apps/demo/src/app/pages/speech/speech-page.component.less

@@ -0,0 +1,58 @@
+:host {
+    display: block;
+}
+
+.transcript {
+    opacity: 0.5;
+    color: var(--tui-text-01);
+
+    &_final {
+        opacity: 1;
+    }
+}
+
+.form {
+    width: 320px;
+    margin: 0 auto;
+}
+
+.textarea {
+    margin: 16px 0;
+    overflow: visible;
+}
+
+.recognition {
+    margin: 16px 0;
+    box-shadow: inset 0 0 0 1px gainsboro;
+    border-radius: var(--tui-radius);
+    padding: 8px 16px;
+    color: var(--tui-text-02);
+}
+
+.buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.sidebar {
+    padding: 12px 16px;
+}
+
+.link {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #444;
+    border-radius: 4px;
+    border: 1px solid gainsboro;
+    font-size: 14px;
+    padding: 16px;
+    margin: 16px 10px;
+    box-sizing: border-box;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
+    }
+}