Angular 7-尝试在上载之前创建音频文件的预览

我想要的结果是在上传到服务器之前创建音频文件的预览。然而，在文件输入之后，什么也没有发生。文件不会动态添加到aduio标记，也不会收到任何错误。控制台显示文件已加载。任何帮助都将不胜感激

我的组件html~

<audio controls #figAudio>
  <source [src]="audSrc" type="audio/ogg">
  <source [src]="audSrc" type="audio/mpeg">
  <source [src]="audSrc" type="audio/wav">
</audio>
<input type="file" (change)="audFileSelected($event)">

---

好的，我解决了这个问题。我没有使用FileReader，而是使用URL对象。然后，我使用一个自定义管道来清理我的音频url

component.ts文件~

@ViewChild('figAudio') figAudio: ElementRef; // audio tag reference
audSrc = 'path/to/default/sound.mpeg';

audFileSelected(event: any) {
  if (event.target.files && event.target.files[0]) {
    const audSrc = URL.createObjectURL(event.target.files[0]);
    this.figAudio.nativeElement.src = this.audSrc;
  }
}

component.html文件~

<audio #figAudio>
  <source [src]="audSrc | sanitizerUrl" type="audio/ogg">
  <source [src]="audSrc | sanitizerUrl" type="audio/mpeg">
  <source [src]="audSrc | sanitizerUrl" type="audio/wav">
</audio>

<audio #figAudio>
  <source [src]="audSrc | sanitizerUrl" type="audio/ogg">
  <source [src]="audSrc | sanitizerUrl" type="audio/mpeg">
  <source [src]="audSrc | sanitizerUrl" type="audio/wav">
</audio>

@Pipe({
  name: 'sanitizerUrl'
})
export class SanitizerUrlPipe implements PipeTransform {

  constructor (
    private sanitize: DomSanitizer
  ) {}

  transform(value: string): SafeUrl {
    return this.sanitize.bypassSecurityTrustUrl(value);
  }
}