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