Blob could not be loaded from a localhost as src blob:

I'm having some trouble loading an audio file in WAV format returned from the backend as a Blob in Angular.

I have in my services the following:

getFileBlob(uniformName: string, path: string) {
const currentPath = path.replace(/\\/g, '/');
return this.http.get(`${environment.api_url}/content/v1.4/${currentPath}/${uniformName}/_blob`, { responseType: 'blob' });
}


Where in my Angular component, I have the following:

this.dService.getFileBlob().subscribe((response: Blob) => {
const url = URL.createObjectURL(response);
this.type.set(response.type);
this.src.set(url);
});


I have the correct mapping in my audio source tag: [

In my template, I have:

<audio #media [vgMedia]="$any(media)" id="myAudio" preload="{{ preload }}" crossorigin>
<source src="{{ src() }}" type="{{ type() }}">
<track
src="assets/data/Downloaded_transcriptVVV.vtt"
kind="metadata"
label="Cue Points"
default
#metadataTrack
/>
</audio>


When I paste the blob in the browser, I get the file downloaded - (blob:http://localhost:4200/7071f3e7-9738-4ad7-b08f-67ddb5852c53) The problem is that the native HTML audio does not play at all. One important note is that I'm using Angular in a zoneless mode. If, however, I put a direct relative URL in the place of the src, it works:

`this.src.set('/assets/audio/E_2024-10-07_H_100748_060.wav')

I would highly appreciate anyone's advice on what I'm doing wrong.

Continue reading...