how to show stream content from Guzzle response to html

Question

I try to show a stream response that have audio/wav output from api using Guzzle. this is what I did

  $data = array(
          'input_text' => $request->input_text,
      );
      $url = "http://abc.or/tospeech";
      $client = new \GuzzleHttp\Client();
      $response = $client->post($url, [
          'headers' => ['Content-Type' => 'application/json', 'Accept' => 'application/json'],
          'body'    => json_encode($data)
      ]);

      $result = $response->getBody()->getContents();
return redirect('/home')->withInput()->with('result', $result);

from the code above the $result have output null but if I change the result to

$result = (string)$response->getBody();

the result will looks like this

then I try to show it in html like this

<audio id="source" class="form-control" controls>
       <source src="{{ session('result') }}" type="audio/wav">
       Your browser does not support the audio element.
</audio>

but nothin happen. please help is anyone knows about this. I really appreciate it.

Answer 1

Assume you have these two routes:

Route::get('/home', function (Request $request) {
    return view('index', [
        'input_text' => $request->input_text
    ]);
});

Route::get('/audio', function (Request $request) {
      $data = array(
          'input_text' => $request->input_text,
      );
      $url = "http://abc.or/tospeech";
      $client = new \GuzzleHttp\Client();
      $response = $client->post($url, [
          'headers' => ['Content-Type' => 'application/json', 'Accept' => 'application/json'],
          'body'    => json_encode($data)
      ]);

      $result = $response->getBody()->getContents();
      return response($result, 200, [
           'Content-Type' => 'audio/wav'
      ]);
})->name('stream');

Then your view will be something like:

<audio id="source" class="form-control" controls>
       <source src="{{ route('stream', [ 'input_text' => $input_text ]) }}" type="audio/wav">
       Your browser does not support the audio element.
</audio>

The idea here is:

1. Your initial /home route would stay the same (not sure how it was before, here I just have an example one).
2. There's a 2nd route that will read the audio data and and send them as a response.

This should make the audio element play the data when it's all loaded. Note that this does not allow seeking through the audio and will actually send all the audio at once. If you want to support seeking you need to make your route support http range requests. There's at least one library that is said to provide support for Laravel but this seems outdated so you may need to do additional searching.