Angular play audio before download is complete

I have an Angular client and one SpringBoot server. On the server, I have an endpoint that generates an audio file from text. The audio file generation depends on another API that take too long (5 seconds+) and I don't want to make the user wait for more than 5 seconds for the audio to start.

To fix the time issue, I'm returning a Flux as I receive the bytes from the API (supports streaming). Until here, everything is good. Endpoint code:

@PostMapping(value = "/speech")
public Flux<DataBuffer> generateSpeechAudio(@RequestBody @Valid SpeechRequest speechRequest) {
return audioService.generateSpeech(speechRequest);
}


On the client side (Angular), I want to call the API and start the audio before the byte download finished. For that, I'm using the reportProgress and I observe the events in my client call:

transcribeTextToAudio(toAudio: ITranscript): Observable<HttpEvent<string>> {
return this.httpClient.post<string>(`${this.transcriptionLink}/speech`, toAudio, {
observe: 'events',
responseType: 'arrayBuffer' as 'json',
reportProgress: true,
});
}


I'm not sure how to get the bytes and "play them" or even if such a thing is possible. Using MediaSource works, but only of I wait for the entire file to download.

Continue reading...