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

我知道这是旧的,但我有同样的问题,唯一对我有用的是把src放在音频而不是源:

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

在谷歌找不到任何东西所以自己想出来,希望它能帮到某个人

Answer 2

尝试通过更改您的组件和 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>