Currently, I am facing an issue where I want the audio to play when the user clicks on the preview icon. Here is the HTML code:
<audio controls>
<source [src]="fileSource" type="audio/mp3">
</audio>
This is my TypeScript code:
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);
});
}
And here is my service:
downloadFile(id: number): Observable<Blob> {
const URL = `${this.appConfig.apiEndpoint + '/PostFileContent/DownloadFile/' + id}`;
return this.http.get(URL, { responseType: 'blob' });
}
My current problem is that when I click on the preview icon, the file is downloaded but it does not play. What could be causing this issue? How can I resolve it?