如何在Angular2中静音和取消静音？

Question

我的Angular项目中有声音,如下所示:

introInfo() {
   this.audio.src = '../assets/sound1.wav';
   this.audio.load();
   this.audio.play();
 }

 feedbackInfo() {
   this.audio.src = '../assets/sound1.wav';
   this.audio.load();
   // auto-start
   this.audio.play();
 }

我希望能够将所有声音静音.如果我单击模板中的按钮:

<img class="grow" id="mute" [src]='mute' (click)="muteF()"/>

我怎么能写我的功能muteF？如果我点击按钮,我想静音.如果我再次单击,则必须执行取消静音.

Answer 1

可能是这样的（例如，除非 Angular 具有特定于音频的功能）。

成分

import { ElementRef, Inject, Injectable, ViewChild } from '@angular/core';

@Injectable()
export class MyService {
  @ViewChild('audio') audio: ElementRef

  constructor(/* DOCUMENT would be an option too, from @angular/platform-browser - `@Inject(DOCUMENT) private document: any` */) {}
  introInfo() {
    this.audio.nativeElement.load()
    this.audio.nativeElement.play()
  }
//...
}

然后在模板中

模板

<audio #audio></audio>