Angular2: restart the html audio tag on real time

Question

I have a component which play an mp3 file, and it gets the played file name from its parent. Here is the code:

export class PlayComponent implements OnChanges  {

      @Input() fileToPlay:string;

      ngOnChanges(arg){

         console.log(arg.fileToPlay);
      }
    }

and the html is:

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

It works fine for first play. The value of fileToPlay may change and i want to play the new file on real time, but it always play the first file name.

How can i fix it?

Answer 1

I know this is old but I had the same problem and the only thing that worked for me was putting the src in the audio not the source:

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

couldn't find anything on google so figured it out myself, hope it helps someone