HTML5 音频标签的流式传输容器-Golang-PHP中文网

HTML5 音频标签的流式传输容器

碧海醫心

发布： 2025-10-01 20:27:01

原创

665人浏览过

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)
}

登录后复制

注意事项：

音记AI

音视频秒转文字，声波流式转录，让每个声音都成篇章

查看详情

这种方法依赖于浏览器的行为。某些浏览器可能会尝试下载整个 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 音频标签的流式传输容器的详细内容，更多请关注php中文网其它相关文章！