Angular2：リアルタイムでhtmlオーディオタグを再起動

Question

私はmp3ファイルを再生するコンポーネントを持っていて、それはその親から再生されたファイル名を取得します。ここでは、コードです：

export class PlayComponent implements OnChanges { 

     @Input() fileToPlay:string; 

     ngOnChanges(arg){ 

     console.log(arg.fileToPlay); 
     } 
    } 

とHTMLは次のとおりです。

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

それは最初のプレイのために正常に動作します。 fileToPlayの値が変更され、新しいファイルをリアルタイムで再生したいが、は常に最初のファイル名を再生する。

どうすれば修正できますか？

Answer 1

以下のようにあなたのコンポーネントとHTMLを変更することで、チェックしてみてください：

//コンポーネント

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> 

Answer 2

代わりにHTML要素を使用する、ことができます直接javascriptを使ってオーディオを操作する。この記事を参照してください：How to play mp3 with Angular 2?

Answer 3

私は、これは古いです知っているが、私は同じ問題を抱えていたし、私のために働いた唯一のことは、オーディオではないソースにSRCを入れていた。

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

を見つけることができませんでしたGoogle上の何もかも自分自身で分かって、誰かを助けてくれることを願って。