Angular 7 - Попытка создать предварительный просмотр аудиофайла перед загрузкой

Question

Мой желаемый результат - создать предварительный просмотр аудиофайла перед его загрузкой на сервер.Однако после ввода файла ничего не происходит.Файл не добавляется динамически в тег 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)">

Файл ts моего компонента имеет ~

audSrc: SafeUrl;

constructor (
  private sanitize: DomSanitizer
) {}

sanitizeUrl(url: string) {
  return this.sanitize.bypassSecurityTrustUrl(url);
}

audFileSelected(event: any) {
  console.log(event.target.files[0]);
  if (event.target.files && event.target.files[0]) {
    const reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = (evt: any) => {
      this.audSrc = evt.target.result;
        };
    }
}

Answer 1

Хорошо, я решил проблему.Вместо использования 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>

sanitize-url.pipe.ts ~

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

  constructor (
    private sanitize: DomSanitizer
  ) {}

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