Angular 7: воспроизводить только один аудиофайл за раз - PullRequest
Новая
       14

Angular 7: воспроизводить только один аудиофайл за раз

0 голосов
/ 02 июня 2019

У меня есть список аудиофайлов, которые отображаются через * ngFor.Каждый файл состоит из заголовка, кнопки воспроизведения / остановки и индикатора выполнения (будет добавлен позже).Для отдельных файлов я могу воспроизводить и приостанавливать с помощью одной кнопки.Однако только один файл должен быть воспроизведен в любое время.Например, если песня-1 воспроизводится, в то время как пользователь нажимает кнопку воспроизведения для песни-2, песня-1 должна быть остановлена ​​и воспроизводится только песня-2.Так как я довольно новичок в Angular, я не смог достичь этого результата, несмотря на некоторые серьезные усилия.Любая помощь приветствуется!

player-group-component.html: 

<div *ngIf="songGroupInfo" class="song-group-wrapper">
    <div *ngFor="let song of songGroupInfo; let i = index">
        <app-player [songInfo]="song" [songIdx]="i"
      (playingStatusToEmit)="getStatus($event)">
        </app-player>
    </div>
</div>

player-group-component.ts: 

// imports and @component...
export class PlayerGroupComponent implements OnInit {
    songGroupInfo: any = SONGS; 
    statusArray: Object[] = new Array();

    constructor() {}

    ngOnInit() {}

    // get playing status from child component
    getStatus(status: Object) {
      console.log(status);
    }
  }

player-component.html: 

<div *ngIf="songInfo" class="player-wrapper">
  <p>{{ songInfo.name }}</p>
  <button *ngIf="!isPlaying" mat-button color="primary"  (click)="toggleMusic()">Play</button>
  <button *ngIf="isPlaying" mat-button color="primary" (click)="toggleMusic()">Pause</button>
</div>

player-component.ts: 

// imports and @component...
export class PlayerComponent implements OnInit {

  @Input() songInfo: any;
  @Input() songIdx: number;
  @Output() playingStatusToEmit = new EventEmitter<Object>();
  sound: any;
  isPlaying: boolean = false;

  constructor() { }

  ngOnInit() {
    this.sound = new Howl({
      src: this.songInfo.link
    });
    this.sound.load();
  }

  playSong() {
    this.sound.play();
    this.isPlaying = true;
    //console.log('Duration: ' + this.sound.duration());
  }

  pauseSong() {
    this.sound.pause();
    this.isPlaying = false;
  }

  stopSong() {
    this.sound.stop();
    this.isPlaying = false;
  }

  toggleMusic() {
    this.isPlaying ? this.pauseSong() : this.playSong();
    this.sendPlayingStatus();
    console.log("Played: " + this.sound.seek());  // show how much is played in seconds
  }  

  sendPlayingStatus() {
    this.playingStatusToEmit.emit({
      'idx': this.songIdx,
      'status': this.isPlaying
    });
  }
}
...