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

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

   }
 }


}

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