本文探讨了如何通过 HTTP 将未压缩的实时音频流式传输到浏览器，并着重讨论了在无法预先确定文件大小的情况下，使用 WAV 格式进行流式传输的挑战。文章分析了两种使用 WAV 格式进行流式传输的方案，并提供了替代方案的思路，旨在帮助开发者选择合适的容器格式和实现方法，从而实现高效、可靠的音频流式传输。
在开发 Web 应用时，有时需要将实时音频数据流式传输到浏览器。对于追求极致音质的应用场景，未压缩的音频格式可能是一个不错的选择。然而，传统的 WAV 格式需要在文件头中预先定义文件大小，这对于实时流式传输来说是一个挑战，因为在数据开始传输时，我们通常无法得知音频流的总长度。本文将探讨如何解决这个问题，并提供一些可行的方案。
使用 WAV 格式进行流式传输的方案
尽管 WAV 格式存在文件大小预定义的限制，但我们仍然可以通过一些技巧来实现流式传输：
1. 伪造头部信息：
立即学习“前端免费学习笔记（深入）”；
一种简单的方案是在 WAV 文件头中设置一个非常大的文件大小（例如 2GB）。这样，浏览器在开始接收数据时，会认为这是一个非常大的文件，从而尝试进行流式传输，而不是一次性下载整个文件。
// 示例代码 (Go)
package main
import (
"encoding/binary"
"fmt"
"net/http"
)
func generateWAVHeader(dataSize uint32) []byte {
// RIFF chunk descriptor
riffID := []byte("RIFF")
riffSize := dataSize + 36 // 文件总大小 - 8
riffFormat := []byte("WAVE")
// fmt sub-chunk
fmtID := []byte("fmt ")
fmtSize := uint32(16)
audioFormat := uint16(1) // PCM = 1
numChannels := uint16(2) // Stereo
sampleRate := uint32(44100) // 44.1 kHz
byteRate := uint32(176400) // SampleRate * NumChannels * BitsPerSample/8
blockAlign := uint16(4) // NumChannels * BitsPerSample/8
bitsPerSample := uint16(16) // 16 bits
// data sub-chunk
dataID := []byte("data")
// dataSize: 音频数据大小 (字节) - 在流式传输中，可以设置为一个较大的值
header := make([]byte, 0)
header = append(header, riffID...)
header = append(header, uint32ToBytes(riffSize)...)
header = append(header, riffFormat...)
header = append(header, fmtID...)
header = append(header, uint32ToBytes(fmtSize)...)
header = append(header, uint16ToBytes(audioFormat)...)
header = append(header, uint16ToBytes(numChannels)...)
header = append(header, uint32ToBytes(sampleRate)...)
header = append(header, uint32ToBytes(byteRate)...)
header = append(header, uint16ToBytes(blockAlign)...)
header = append(header, uint16ToBytes(bitsPerSample)...)
header = append(header, dataID...)
header = append(header, uint32ToBytes(dataSize)...)
return header
}
func uint32ToBytes(i uint32) []byte {
bytes := make([]byte, 4)
binary.LittleEndian.PutUint32(bytes, i)
return bytes
}
func uint16ToBytes(i uint16) []byte {
bytes := make([]byte, 2)
binary.LittleEndian.PutUint16(bytes, i)
return bytes
}
func streamHandler(w http.ResponseWriter, r *http.Request) {
// 设置响应头
w.Header().Set("Content-Type", "audio/wav")
// 生成 WAV 头部，设置一个较大的 dataSize
dataSize := uint32(2147483647) // 2GB - 1
header := generateWAVHeader(dataSize)
// 写入头部
w.Write(header)
// 模拟音频数据流
for i := 0; i < 1000; i++ {
// 生成一些模拟音频数据 (例如，简单的正弦波)
audioData := make([]byte, 4096) // 4KB 块
// 这里可以填充 audioData，例如生成正弦波数据
// ...
// 写入音频数据
w.Write(audioData)
}
}
func main() {
http.HandleFunc("/stream", streamHandler)
fmt.Println("Server listening on port 8080")
http.ListenAndServe(":8080", nil)
}注意事项：
Flash Player 是一款能够播放小又快速的多媒体动画，以及交互式的动画、飞行标志和用macromedia flash做出的图像。这个播放器非常小，只需花一点点时间下载，对于在体验网页上的多媒体效果是个很好的开始。 Flash也支持高品质的mp3音频流、文字输入字段、交互式接口等等很多东西。这个最新版本可以观看所有的flash格式。若你要观看网页上的多媒体内容，flash player几乎是网络上的标准。为此播放器所制作的动画或图像十分常见。 Flash常用按钮代码大全目录 一、Flash按钮代码大
- 这种方法依赖于浏览器的行为。某些浏览器可能会尝试下载整个 2GB 的文件，而不是进行流式传输。现代浏览器通常会更智能地处理这种情况，但仍然需要进行测试。
- Content-Length 响应头不应该设置，或者应该设置为一个非常大的值，以避免浏览器过早地关闭连接。
2. 使用 RIFF 容器的附加块：
WAV 格式是 RIFF (Resource Interchange File Format) 的一个子集。RIFF 规范允许在文件中添加额外的块。我们可以将音频数据分割成多个较小的块，并将它们依次写入 RIFF 容器中。
注意事项：
- 并非所有的 WAV 播放器都完全符合 RIFF 规范。某些播放器可能只读取标准的 44 字节头部，而忽略后续的块。
- 实现起来比伪造头部信息更复杂。
替代方案：其他容器格式
如果 WAV 格式的限制让你感到困扰，可以考虑使用其他更适合流式传输的容器格式，例如：
- Ogg: 一种开放的、免费的容器格式，常与 Vorbis 音频编码一起使用。
- MP4: 一种流行的多媒体容器格式，支持多种音频和视频编码。
- WebM: 一种开放的、免费的容器格式，专为 Web 应用设计，常与 Opus 音频编码一起使用。
这些格式通常提供更好的流式传输支持，并且可以更容易地与现有的 Web 技术集成。
总结
将未压缩的音频流式传输到浏览器可能需要一些技巧，特别是当使用 WAV 格式时。伪造头部信息是一种简单但可能不太可靠的方法。使用 RIFF 容器的附加块是另一种选择，但实现起来更复杂。如果可能，考虑使用更适合流式传输的容器格式，例如 Ogg、MP4 或 WebM。在选择方案时，请权衡复杂性、兼容性和性能等因素，并根据你的具体需求做出最佳选择。
