1

He realizado un reproductor de audio que contiene un botón de Play y un desplegable realizado con un switch. Pues bien, el reproductor funciona y si pulsas play, reproduce la canción y si le vuelves a dar al botón, se para la canción. Mi problema es que no consigo modificar la imagen de play para cuando tu le des click al botón aparezca en esa misma imagen el icono de Pause.

Os dejo mi código html y 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>

Código componente TS

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";

   }
 }


}

Muchas gracias y un saludo

1 respuesta 1

1

Para evitar modificar el DOM puedes añadir un elemento img con el pause y mostrarlo en caso que este pause a true.

En caso que la propiedad pause este a false mostrarías la img de play

<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>
1
  • 1
    No se me había ocurrido. Ahora funciona, muchas gracias @osiris85 Commented el 21 nov. 2018 a las 12:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.