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

Question

I have a sound in my Angular project, like this:

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();
 }

And I would like to be able to mute all sounds. If I click the button in my template:

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

How could I write my function muteF ? I would like to mute if I click the button. If I click a second time, it must perform unmute.

Answer 1

This works for me

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

Answer 2

something like this probably (unless angular has audio-specific features, for example).

Component

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()
  }
//...
}

then in the template

template

<audio #audio></audio>

Answer 3

You can use muted property such as

this.audio.muted = true;

Works for video element as well.

Source: https://www.w3schools.com/tags/av_prop_muted.asp