feat(ui): basic TTS UI (#412)

#272 Co-authored-by: Aliang <nxl1996@gmail.com>
zingzeu · Jul 13, 2020 · 09fba55 · 09fba55
1 parent da9bd66
commit 09fba55
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 2 deletions.
diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts
@@ -14,6 +14,7 @@ import {MaterialModule} from '../material/material.module';
 import {AdvancedSearchLandingComponent} from './advanced-search-landing/advanced-search-landing.component';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
+import {AudioPlayerComponent} from './audio-player/audio-player.component';
 import {CommonToolbarComponent} from './common-toolbar/common-toolbar.component';
 import {DebugInfoComponent} from './debug-info/debug-info.component';
 import {DetailsFengComponent} from './details-feng/details-feng.component';
@@ -49,7 +50,8 @@ import {YngpingHelpDialogComponent} from './yngping-help-dialog/yngping-help-dia
     CommonToolbarComponent,
     DebugInfoComponent,
     YngpingHelpDialogComponent,
-    SimplificationToolComponent
+    SimplificationToolComponent,
+    AudioPlayerComponent
   ],
   imports: [
     AppRoutingModule,

diff --git a/web/src/app/audio-player/audio-player.component.html b/web/src/app/audio-player/audio-player.component.html
@@ -0,0 +1,5 @@
+<button mat-icon-button aria-label="播放音频" (click)="onClicked()">
+    <mat-icon *ngIf="state === PlayerStateEnum.Idle">play_arrow</mat-icon>
+    <mat-icon *ngIf="state === PlayerStateEnum.Loading">more_horiz</mat-icon>
+    <mat-icon *ngIf="state === PlayerStateEnum.Playing">stop</mat-icon>
+</button>
diff --git a/web/src/app/audio-player/audio-player.component.scss b/web/src/app/audio-player/audio-player.component.scss
diff --git a/web/src/app/audio-player/audio-player.component.spec.ts b/web/src/app/audio-player/audio-player.component.spec.ts
@@ -0,0 +1,22 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {AudioPlayerComponent} from './audio-player.component';
+
+describe('AudioPlayerComponent', () => {
+  let component: AudioPlayerComponent;
+  let fixture: ComponentFixture<AudioPlayerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({declarations: [AudioPlayerComponent]}).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AudioPlayerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/web/src/app/audio-player/audio-player.component.ts b/web/src/app/audio-player/audio-player.component.ts
@@ -0,0 +1,64 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-audio-player',
+  templateUrl: './audio-player.component.html',
+  styleUrls: ['./audio-player.component.scss']
+})
+export class AudioPlayerComponent implements OnInit {
+  public PlayerStateEnum = PlayerState;
+
+  @Input('audioUrl') audioUrl: string;
+  state: PlayerState = PlayerState.Idle;
+  private currentAudio: HTMLAudioElement = null;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  onClicked() {
+    switch (this.state) {
+      case PlayerState.Idle:
+        console.log('playing + ' + this.audioUrl);
+        this.currentAudio = new Audio(this.audioUrl);
+        this.state = PlayerState.Loading;
+        this.currentAudio.onended = () => {
+          this.state = PlayerState.Idle;
+          this.currentAudio = null;
+        };
+        this.currentAudio.oncanplaythrough = () => {
+          this.state = PlayerState.Playing;
+          this.currentAudio.play();
+        };
+        this.currentAudio.onerror = (e) => {
+          let mediaError = this.currentAudio.error;
+          this.currentAudio = null;
+          if (mediaError.message.indexOf('404') >= 0) {
+            console.log('404 encountered. Disabling audio player for ' + this.audioUrl);
+            this.state = PlayerState.Disabled;
+          } else {
+            this.state = PlayerState.Idle;
+          }
+        };
+        break;
+      case PlayerState.Playing:
+        if (this.currentAudio != null) {
+        }
+        break;
+      case PlayerState.Loading:
+      case PlayerState.Disabled:
+        console.log('Do nothing');
+        break;
+    }
+  }
+}
+
+
+enum PlayerState {
+  // Initial State.
+  Idle,
+  Loading,
+  Playing,
+  // When a 404 is encountered. Prevents further attempts.
+  Disabled
+}
diff --git a/web/src/app/details-feng/details-feng.component.html b/web/src/app/details-feng/details-feng.component.html
@@ -6,14 +6,16 @@
     <div class="text-yngping">
       <span class="label">{{ shouldShowSandhi ? "市区单字": "福州市区"}}</span>
       {{ fengDoc.getYngpingUnderlying() }}
+      <app-audio-player [audioUrl]="audioUrlUnderlying"></app-audio-player>
       <button mat-icon-button color="secondary" aria-label="这是什么？" 
         (click)="onShowYngpingHelp()">
         <mat-icon>help</mat-icon>
       </button>
     </div>
     <div class="text-yngping" *ngIf="shouldShowSandhi">
       <span class="label">市区连读</span>
-      {{ fengDoc.getYngpingCanonical() }}
+      {{ fengDoc.getYngpingCanonical() }} 
+      <app-audio-player [audioUrl]="audioUrlSandhi"></app-audio-player>
     </div>
   </div>
 

diff --git a/web/src/app/details-feng/details-feng.component.ts b/web/src/app/details-feng/details-feng.component.ts
@@ -47,6 +47,14 @@ export class DetailsFengComponent implements OnInit, OnDestroy {
     return this.fengDoc.getYngpingUnderlying() !== this.fengDoc.getYngpingCanonical();
   }
 
+  get audioUrlUnderlying() {
+    return this.environment.serverUrl + '/tts/' + this.fengDoc.getYngpingUnderlying()
+  }
+
+  get audioUrlSandhi() {
+    return this.environment.serverUrl + '/tts/' + this.fengDoc.getYngpingCanonical()
+  }
+
   constructor(
       @Inject(YNGDIENG_ENVIRONMENT) private environment: IYngdiengEnvironment,
       private route: ActivatedRoute,