Кнопки воспроизведения / остановки

Question

Мне нужно написать функцию, которая будет рендерить несколько аудио файлов, и для каждого будет кнопка воспроизведения. При нажатии на отдельную кнопку звук воспроизводится, и кнопка превращается в значок остановки. Как я могу управлять каждой кнопкой отдельно в одном и том же компоненте?

Вот пример, с которым я работаю

Answer 1

Вам нужен список, это лучше.

Попробуйте:

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  playlist = [
    {name: 'music1', play : false},
    {name: 'music2', play : false},
    {name: 'music3', play : false}
  ]

  togglePlay(music :any) {
    music.play = !music.play;
  }
}

HTML :

<button *ngFor="let music of playlist" (click)="togglePlay(music)" mat-icon-button>
  <mat-icon class="blue"> {{ music.play ? 'stop_circle_outline' : 'play_circle_outline'}}</mat-icon>
</button>