скачать и воспроизводить потоковое аудио в Angular 8

Question

Мне нужно воспроизвести звук, щелкнув по значку предварительного просмотра.

это мой HTML-код:

<audio controls>
    <source [src]="fileSource" type="audio/mp3">
</audio>

это код TS:

fileSource: any;

ngOnInit(): void {
if (typeof this.data.src === 'number') {
  this.getImageFromService();
  }
}

     createImageFromBlob(image: Blob): void {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      this.fileSource = reader.result;
    }, false);

    if (image) {
      reader.readAsDataURL(image);
    }
  }

  getImageFromService(): void {

    this.isLoading = true;
    this.postFileService.downloadFile(this.data.src).subscribe(data => {
      this.createImageFromBlob(data);
      this.isLoading = false;
    }, error => {
      this.isLoading = false;
      console.log(error);
    });
  }

и это мой сервис:

   downloadFile(id: number): Observable<Blob> {
    const URL = `${this.appConfig.apiEndpoint + '/PostFileContent/DownloadFile/' + id}`;

    return this.http.get(URL, { responseType: 'blob' });
}

теперь моя проблема такова:

мне нужно, когда щелкаю значок предварительного просмотра T, открываю модальное диалоговое окно и воспроизводим аудио.

когда я нажимаю на иконку предварительного просмотра, файл загружается, но онне играть .

В чем проблема?как я могу решить это ???

Answer 1

Следующий код будет работать для автоматического воспроизведения аудио файла, который был получен из бэкэнда (node.js).

angular.html

<audio controls>
  <source  type="audio/mpeg"  [src]="fileSource" >
</audio>

angualr.ts

// mention your backend url directly here like below
fileSource:any = 'http://localhost:1234/getAudioFile';

код узла-узла

  app.use('/getAudioFile',function(req,res,next){
  // i stored sample mp3 file in my local directory
  var filePath = path1.join(__dirname, './sample.mp3');
  var stat = fileSystem.statSync(filePath);

  res.writeHead(200, {
    'Content-Type': 'audio/mpeg',
    'Content-Length': stat.size
  });

  var readStream = fileSystem.createReadStream(filePath);
  // We replaced all the event handlers with a simple call to readStream.pipe()
  readStream.pipe(res);
  // res.send("this is audio ");
  next();
});

Примечание :: Убедитесь, что вы получаете напрямуюаудиофайл из бэкэнда (независимо от узла или Java).