HTML5音频流式传输容器解析

本文探讨了如何通过 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)
}

注意事项：

• 这种方法依赖于浏览器的行为。某些浏览器可能会尝试下载整个 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。在选择方案时，请权衡复杂性、兼容性和性能等因素，并根据你的具体需求做出最佳选择。