如何将Guzzle返回的audio/wav流内容在HTML audio标签中正常播放

核心问题分析 #

• 请求头的Accept参数配置错误：你设置了Accept: application/json，但接口返回的是audio/wav格式的二进制流，部分接口会根据Accept头返回对应格式内容，配置错误可能导致返回内容不符合预期。
• 音频标签的src属性无法直接识别原始二进制内容：需要将二进制流转换为浏览器支持的Data URI格式才能正常加载。
• getContents()返回null的原因：Guzzle的响应Body是流对象，getContents()只会读取指针当前位置到末尾的内容，如果之前有读取操作导致指针移到末尾，就会返回null；直接强转为string会强制重置指针读取全部内容，所以可以拿到完整二进制流。

具体修改步骤 #

第一步：修正Guzzle请求代码 #

$data = array(
    'input_text' => $request->input_text,
);
$url = "http://abc.or/tospeech";
$client = new \GuzzleHttp\Client();
$response = $client->post($url, [
    // 修正Accept头为音频格式
    'headers' => ['Content-Type' => 'application/json', 'Accept' => 'audio/wav'],
    'body'    => json_encode($data)
]);

// 拿到二进制流后转base64，拼接Data URI前缀
$audioBinary = (string)$response->getBody();
$audioDataUri = 'data:audio/wav;base64,' . base64_encode($audioBinary);

return redirect('/home')->withInput()->with('result', $audioDataUri);

第二步：修正HTML渲染代码 #

不需要修改其他配置，直接传入处理好的Data URI即可：

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

优化建议 #

如果生成的音频时长较长，base64编码后的内容会非常大，session存在存储上限，建议将音频流写入服务器的临时公共目录，把生成的音频访问URL传给前端，性能和兼容性更好。

内容的提问来源于stack exchange，提问作者Qube