Lumen返回音频至HTML Audio Player无法播放问题求助

问题根源 #

前端请求音频时未指定响应类型为二进制格式，导致返回的音频数据被错误解析为字符串，转成Blob后文件结构损坏，无法被audio标签识别。

前端修复方案 #

在发起请求时必须设置responseType: 'blob'，确保获取到原始二进制数据：

基于Axios的实现 #

axios.get('/api/get-audio', {
  responseType: 'blob' // 关键配置：指定响应为二进制Blob格式
}).then(res => {
  const url = window.URL.createObjectURL(res.data);
  this.audio.resource = url;
});

// 组件销毁时释放URL资源，避免内存泄漏
beforeUnmount() {
  if (this.audio.resource) {
    window.URL.revokeObjectURL(this.audio.resource);
  }
}

基于原生Fetch的实现 #

fetch('/api/get-audio')
  .then(res => res.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    this.audio.resource = url;
  });

后端代码优化（可选） #

你的原有代码存在冗余的临时文件操作，可以简化为直接返回外部服务的音频内容，避免不必要的文件IO：

$audioContent = Http::get(myExternalResourceUrl)->body();

return response($audioContent, 200, [
    'Content-Type' => 'audio/mp3',
    // 用inline让浏览器直接解析音频，而非触发下载弹窗
    'Content-Disposition' => 'inline; filename="myAudio.mp3"'
]);

如果坚持使用临时文件方案，可调整为直接返回临时文件内容，并添加自动清理逻辑：

$tempname = tempnam(sys_get_temp_dir(), 'response').'.mp3';
Http::sink($tempname)->get(myExternalResourceUrl);

// 直接返回临时文件
return response()->file($tempname, [
    'Content-Type' => 'audio/mp3',
    'Content-Disposition' => 'inline; filename="myAudio.mp3"'
]);

// 请求结束后自动删除临时文件
register_shutdown_function(function() use ($tempname) {
    if (file_exists($tempname)) {
        unlink($tempname);
    }
});

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