Tengo un componente que reproduce un archivo mp3, y obtiene el nombre del archivo reproducido de su padre. Aquí está el código:

export class PlayComponent implements OnChanges  {

      @Input() fileToPlay:string;

      ngOnChanges(arg){

         console.log(arg.fileToPlay);
      }
    }

Y el html es:

<div *ngIf="fileToPlay!=''">
    <audio  controls autoplay class="playa" di="audio">
      <source [src]="fileToPlay" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
</div>

Funciona bien para la primera jugada. El valor de fileToPlay puede cambiar y quiero reproducir el nuevo archivo en tiempo real, pero siempre reproduce el primer nombre de archivo.

¿Cómo puedo arreglarlo?

6
Salman Lashkarara 24 dic. 2016 a las 13:32

3 respuestas

La mejor respuesta

Intente verificar cambiando su Componente y HTML de la siguiente manera:

// Su componente

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';

export class PlayComponent implements OnChanges  {

  private showPlayer: boolean = false; 
  @Input() fileToPlay:string;

  ngOnInit(){
    if (this.fileToPlay != '') {
      this.showPlayer = true;
    }
  }

  ngOnChanges(changes: {[propKey: string]: SimpleChange}){

     if(changes['fileToPlay'].previousValue !== changes['fileToPlay'].currentValue && changes['fileToPlay'].currentValue !== '') {
      this.showPlayer = false;
      setTimeout(() => this.showPlayer = true, 0);
    }
  }
}

// HTML

<div *ngIf="showPlayer">
  <audio  controls autoplay class="playa" di="audio">
    <source [src]="fileToPlay" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</div>
4
ranakrunal9 24 dic. 2016 a las 11:17

Sé que esto es viejo, pero tuve el mismo problema y lo único que funcionó para mí fue poner el src en el audio, no en la fuente:

<audio controls src={{filetoplay}}></audio>

No pude encontrar nada en google, así que lo descubrí yo mismo, espero que ayude a alguien

8
Jan V. 10 jun. 2017 a las 21:35

En lugar de usar el elemento HTML, puede usar directamente javascript para manipular el audio. Vea esta publicación: ¿Cómo reproducir mp3 con Angular 2?

0
Community 23 may. 2017 a las 11:54