本文探讨了如何通过 HTTP 将未压缩的实时音频流式传输到浏览器，并着重讨论了在无法预先确定文件大小的情况下，使用 WAV 格式进行流式传输的挑战。文章分析了两种使用 WAV 格式进行流式传输的方案，并提供了替代方案的思路，旨在帮助开发者选择合适的容器格式和实现方法，从而实现高效、可靠的音频流式传输。
在开发 Web 应用时，有时需要将实时音频数据流式传输到浏览器。对于追求极致音质的应用场景，未压缩的音频格式可能是一个不错的选择。然而，传统的 WAV 格式需要在文件头中预先定义文件大小，这对于实时流式传输来说是一个挑战，因为在数据开始传输时，我们通常无法得知音频流的总长度。本文将探讨如何解决这个问题，并提供一些可行的方案。
使用 WAV 格式进行流式传输的方案
尽管 WAV 格式存在文件大小预定义的限制，但我们仍然可以通过一些技巧来实现流式传输：
1. 伪造头部信息：
立即学习“前端免费学习笔记（深入）”；
一种简单的方案是在 WAV 文件头中设置一个非常大的文件大小（例如 2GB）。这样，浏览器在开始接收数据时，会认为这是一个非常大的文件，从而尝试进行流式传输，而不是一次性下载整个文件。
// 示例代码 (Go)package mainimport ( "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)}
注意事项：
这种方法依赖于浏览器的行为。某些浏览器可能会尝试下载整个 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。在选择方案时，请权衡复杂性、兼容性和性能等因素，并根据你的具体需求做出最佳选择。
以上就是HTML5 音频标签的流式传输容器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1410265.html
微信扫一扫 
支付宝扫一扫 
