Change image play to pause of an audio player with angular 6

1

I have made an audio player that contains a Play button and a drop-down made with a switch. Well, the player works and if you press play, it plays the song and if you give it back to the button, the song stops. My problem is that I can not modify the play image so when you click on the button, the Pause icon appears in that same image.

I leave you my html code and ts.

<div class="container">
        <button id="ctrlCancionAtras" class="btnAudio" (click)="getSelectedBeat()">
          <img [style.backgroundImage]="'url(assets/img/play.png)'" [style.width.px]="128" [style.height.px]="128"
          [style.border]="none"/>
        </button>
        <select class="btnAudio" id="desplegable" [(ngModel)]="music">
          <option [value]=null>Selecciona el beat</option>
          <option *ngFor="let music of musics" [ngValue]="music.id">{{music.name}}</option>
        </select>
</div>

TS component code

import { Component, OnInit } from '@angular/core';
import { Music } from '../../models/music';


@Component({
  selector: 'app-audio',
  templateUrl: './audio.component.html',
  styleUrls: ['./audio.component.css']
})
export class AudioComponent implements OnInit {

  //propiedades audio
  public audio: HTMLAudioElement;

  //propiedades del select del audio
  public musics=[
    {id:1, name:'Ayax'},
    {id:2, name:'akapellahgghhhhhh'},
    {id:3, name:'bad bunny'}
  ];
  music=null;

  public pausaAudio: boolean;


  constructor() {

    //objeto audio
    this.audio=new Audio();

  }


  ngOnInit() {
  }

  //Funcionalidad audio
  getSelectedBeat(){
    console.log(this.music)
    switch(this.music){
      case 0:
        alert("nada");
        break;
      case 1:
        this.audio.src="assets/audio/ayax.mp3";
        this.playPause();
        break;
      case 2:
        this.audio.src="assets/audio/aka.mp3";
        this.playPause();
        break;
      case 3:
        this.audio.src="assets/audio/bad.mp3";
        this.playPause();
        break;
      default:
        alert("Selecciona el beat abriendo el desplegable");
    }
 }

 //funcion de play y pause del reproductor
  playPause(){
   this.pausaAudio = !this.pausaAudio;
   if (this.pausaAudio) {
     this.audio.play();
     // this.ctrlCancionPlay.style.visibility="hidden";
     // ctrlCancionPausa.style.background="url(assets/img/pause.png) no-repeat";

   }else{
     this.audio.pause();
     // this.ctrlCancionPlay.style.visibility="visibility";
     // ctrlCancionPausa.style.background="url(assets/img/play.png) no-repeat";

   }
 }


}

Thank you and greetings

    
asked by Jaime García 21.11.2018 в 13:23
source

1 answer

1

To avoid modifying the DOM you can add an img element with the pause and show it in case it pauses to true.

In case the property pause this to false you would show the play img

<div class="container">
        <button id="ctrlCancionAtras" class="btnAudio" (click)="getSelectedBeat()">
          <img *ngIf="!pausaAudio" [style.backgroundImage]="'url(assets/img/play.png)'" [style.width.px]="128" [style.height.px]="128"
          [style.border]="none"/>
          <img *ngIf="pausaAudio" [style.backgroundImage]="'url(assets/img/pause.png)'" [style.width.px]="128" [style.height.px]="128"
          [style.border]="none"/>
        </button>
        <select class="btnAudio" id="desplegable" [(ngModel)]="music">
          <option [value]=null>Selecciona el beat</option>
          <option *ngFor="let music of musics" [ngValue]="music.id">{{music.name}}</option>
        </select>
</div>
    
answered by 21.11.2018 / 13:46
source