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