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

Question

我有一個聲音在我的角度項目，像這樣：

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

可能是這樣的事情（除非角度具有音頻特定的功能，例如）。

組件

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> 

Answer 2

這對我的作品

muteF() { 
    if (this.audio.volume !== 0) { 
     this.audio.volume = 0; 
    } else { 
     this.audio.volume = 1; 
    } 
    }