服务器返回时无法解码音频文件

Question

在服务器（node koa.js）上，这就是我获取文件并设置响应的主体的方式：

fs.readFile(file.wav, (err, data) => {
    ctx.body = data; // data is a Buffer
});

请求文件时，服务器返回以下响应标头：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Content-Type: application/octet-stream
Content-Length: 49396932
Date: Sat, 09 Sep 2017 14:55:35 GMT
Connection: keep-alive

到目前为止一切都很好。前端有问题。

this.filesService.readContent().subscribe(response => {
    let arrayBuffer = response.arrayBuffer();
    console.log(response._body) //"RIFF���WAVEfmt D��data0������[...]d3 *ID3 TXXXSoftwareFL Studio 11"
    console.log(response._body.length) //47616738
    console.log(arrayBuffer.byteLength) //95233476
    audioContext.decodeAudioData(arrayBuffer).catch(e => {
       console.log(e) //DOMException: Unable to decode audio data
    })
});

为什么我不能解码此音频文件？

另外，我想：

1. 为什么响应的身体很容易阅读？例如，" ID3 TXXXSSOFTWAREFL Studio 11"看起来像是正常的文本，而不是字节。这是一个编码问题吗？
2. 为什么体长47616738而不是49396932（内容长度）
3. 为什么数组缓冲区具有双尺寸？

我知道我的文件是一个完全有效的文件，并且可以从浏览器中解码。如果我手动将服务器返回并使用输入文件上传到应用程序上的同一文件，则浏览器对解码没有问题。

问题是服务器返回文件的方式，或者是Angular 2解释响应的方式。

任何帮助都将受到赞赏：）。欢呼！

Answer 1

调用response.arrayBuffer()时，Angular用Uint16Array视图将身体转换为ArrayBuffer，我认为这解释了response.arrayBuffer().byteLength为什么具有双重大小。

但是，如果您事先告诉Angular，您期望的是ArrayBuffer的响应内容类型，则关联的视图将为Uint8Array：

readContent() {
    return this.http.get(url, { responseType: ResponseContentType.ArrayBuffer })
}

似乎decodeAudioData仅与Uint8Array一起使用。