.NET Core代理Twilio音频流时HTML audio标签不显示时长如何解决

问题根因 #

• 你当前直接返回GetStreamAsync的流时，ASP.NET Core不会自动把Twilio端响应的Content-Length头转发给前端，也默认没有开启范围请求（Range Request）支持
• HTML的<audio>标签获取音频时长依赖Content-Length响应头或者范围请求支持，缺少这两个条件时就算能正常播放也无法计算总时长
• Postman会默认拉取完整响应体后自行计算时长，所以不受影响

可行解决方案（无需全量预下载，边拉边转发） #

直接调整Controller的Action实现，提前获取Twilio响应的头信息，再用ASP.NET Core内置的FileResult转发流，自动处理范围请求和头转发：

[HttpGet("/audio/{id}")]
public async Task<IActionResult> GetFile(string id)
{
    // 只读取响应头就返回，不等待全量下载音频内容
    var response = await _httpClient.GetAsync($"https://api.twilio.com/Account/something/Recordings/{id}.wav", HttpCompletionOption.ResponseHeadersRead);
    response.EnsureSuccessStatusCode();
    
    var contentType = response.Content.Headers.ContentType?.ToString() ?? "audio/wav";
    var contentLength = response.Content.Headers.ContentLength;
    var stream = await response.Content.ReadAsStreamAsync();
    
    // 返回FileResult，开启范围请求支持，自动处理audio标签的分片请求
    return File(stream, contentType, enableRangeProcessing: true, fileDownloadName: $"{id}.wav")
    {
        // 手动带上上游返回的总文件长度
        FileLength = contentLength
    };
}

验证说明 #

• 上述代码用HttpCompletionOption.ResponseHeadersRead保证不会预下载完整音频，收到Twilio的响应头后就开始向客户端转发流，不会产生两次等待的问题
• enableRangeProcessing开启后会自动响应<audio>标签发出的范围请求，配合FileLength设置的总长度，标签就能正常识别音频总时长
• 前端代码不需要做任何修改，直接复用现有逻辑即可

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