跟着 MDN 学 HTML day_25：（数字音频概念完全解析）

一、音频的数字化采样原理

声音在自然界中是一种模拟信号，通过介质（通常是空气）的振动以波的形式传播。计算机处理音频需要将这种连续的模拟信号转换为离散的数字数据，这个过程称为模数转换。转换过程中的采样率和采样深度直接决定了数字音频的质量和数据量。

音频采样代码示例：

// Web Audio API 中获取采样率信息
const audioContext = new AudioContext();
console.log(`当前采样率: ${audioContext.sampleRate} Hz`);

// 创建一个简单的正弦波振荡器
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.value = 440; // A4 音符
oscillator.connect(audioContext.destination);

// 查看可用的采样率
console.log(`基础采样率: ${audioContext.baseLatency}`);

使用 Python 生成并分析音频采样：

import numpy as np
import matplotlib.pyplot as plt

# 生成一个 440Hz 的正弦波，采样率 44100 Hz
sample_rate = 44100  # 44.1 kHz CD 音质标准
duration = 0.1       # 持续时间 0.1 秒
frequency = 440      # A4 音符

t = np.linspace(0, duration, int(sample_rate * duration))
wave = np.sin(2 * np.pi * frequency * t)

# 降低采样率进行对比
sample_rate_low = 8000  # 8 kHz 电话音质
t_low = np.linspace(0, duration, int(sample_rate_low * duration))
wave_low = np.sin(2 * np.pi * frequency * t_low)

print(f"44.1 kHz 采样下的样本数: {len(wave)}")
print(f"8 kHz 采样下的样本数: {len(wave_low)}")

知识点：奈奎斯特-香农采样定理指出，要准确重建一个信号，采样频率必须至少是信号最高频率的两倍。人类听觉范围约 20 Hz 到 20 kHz，因此 44.1 kHz 成为 CD 音质标准。采样率低于 40 kHz 时，人耳能听到的最高频声音将无法被完整还原。电话系统使用 8 kHz 采样率，只能传输 300 Hz 到 3 kHz 的频率范围。

二、音频数据格式与帧结构

音频数据在计算机中以样本流的形式存储。每个样本代表声音波形在某一时刻的振幅值。多个样本按照时间顺序排列，构成了数字音频的基础数据结构。不同的音频格式使用不同的样本大小和通道数。

音频帧结构解析示例：

// 计算音频帧大小
function calculateFrameSize(sampleSize, channels) {
    // sampleSize 单位为字节
    return sampleSize * channels;
}

// 计算每秒数据量
function calculateDataRate(sampleRate, sampleSize, channels) {
    return sampleRate * sampleSize * channels;
}

// 16位立体声，48kHz 采样率
const sampleSize16 = 2;    // 16位 = 2字节
const channelsStereo = 2;
const sampleRate48k = 48000;

const frameSize = calculateFrameSize(sampleSize16, channelsStereo);
const dataRate = calculateDataRate(sampleRate48k, sampleSize16, channelsStereo);

console.log(`每个音频帧大小: ${frameSize} 字节`);
console.log(`每秒数据量: ${dataRate} 字节/秒`);
console.log(`数据速率: ${dataRate / 1024} KB/s`);

// 计算一首3分钟歌曲的原始数据量
const songDuration = 180; // 3分钟 = 180秒
const totalData = dataRate * songDuration;
console.log(`3分钟立体声音频原始数据: ${(totalData / 1024 / 1024).toFixed(2)} MB`);

使用 JavaScript 模拟音频样本处理：

// 模拟音频缓冲区
class AudioBuffer {
    constructor(channels, sampleRate, duration) {
        this.channels = channels;
        this.sampleRate = sampleRate;
        this.length = Math.floor(sampleRate * duration);
        this.data = [];
        
        // 为每个通道初始化数据数组
        for (let i = 0; i < channels; i++) {
            this.data[i] = new Float32Array(this.length);
        }
    }
    
    // 获取指定位置的样本值
    getSample(channel, position) {
        return this.data[channel][position];
    }
    
    // 设置指定位置的样本值
    setSample(channel, position, value) {
        this.data[channel][position] = value;
    }
    
    // 获取完整的音频帧（所有通道的样本）
    getFrame(position) {
        const frame = [];
        for (let c = 0; c < this.channels; c++) {
            frame.push(this.data[c][position]);
        }
        return frame;
    }
}

// 创建 2 通道，44.1kHz，1秒的缓冲区
const buffer = new AudioBuffer(2, 44100, 1);
console.log(`通道数: ${buffer.channels}`);
console.log(`总样本数: ${buffer.length}`);

知识点：每个音频样本可以是 8 位、16 位、24 位或 32 位整数，或 32 位浮点数。16 位是 Web 音频的标准格式，提供 96 dB 的动态范围。音频帧是包含所有通道样本的数据单元，立体声音频的一帧包含左通道和右通道两个样本。对于 16 位立体声 48 kHz 音频，每秒需要 2×2×48000 = 192,000 字节（约 187.5 KB）的存储空间。

三、音频压缩的基本策略

原始音频数据量巨大，传输和存储都很困难。例如，一首 3 分钟的立体声 CD 质量歌曲约占用 34.5 MB 内存。音频压缩通过移除冗余信息和人耳不敏感的声音成分来减小文件体积。压缩分为有损和无损两种类型，各有适用场景。

压缩比计算示例：

// 计算不同压缩格式的理论大小和压缩比
class AudioCompressionAnalyzer {
    constructor(originalSize) {
        this.originalSize = originalSize; // 字节
    }
    
    // 无损压缩（如 FLAC），通常压缩到 40-60%
    losslessCompression() {
        const minCompressed = this.originalSize * 0.4;
        const maxCompressed = this.originalSize * 0.6;
        return {
            minSize: minCompressed,
            maxSize: maxCompressed,
            minRatio: '40%',
            maxRatio: '60%'
        };
    }
    
    // 有损压缩（如 MP3/AAC），通常压缩到 5-20%
    lossyCompression() {
        const minCompressed = this.originalSize * 0.05;
        const maxCompressed = this.originalSize * 0.20;
        return {
            minSize: minCompressed,
            maxSize: maxCompressed,
            minRatio: '5%',
            maxRatio: '20%'
        };
    }
}

// 计算 3 分钟 16 位立体声 44.1kHz 音频的压缩效果
const originalDataRate = 44100 * 2 * 2; // 176,400 字节/秒
const duration = 180; // 3分钟
const originalTotal = originalDataRate * duration;

const analyzer = new AudioCompressionAnalyzer(originalTotal);
const lossless = analyzer.losslessCompression();
const lossy = analyzer.lossyCompression();

console.log(`原始音频大小: ${(originalTotal / 1024 / 1024).toFixed(2)} MB`);
console.log(`无损压缩后: ${(lossless.minSize / 1024 / 1024).toFixed(2)} - ${(lossless.maxSize / 1024 / 1024).toFixed(2)} MB`);
console.log(`有损压缩后: ${(lossy.minSize / 1024 / 1024).toFixed(2)} - ${(lossy.maxSize / 1024 / 1024).toFixed(2)} MB`);

使用 Web Audio API 分析音频波形复杂度：

async function analyzeAudioComplexity(audioBuffer) {
    const channelData = audioBuffer.getChannelData(0);
    
    // 计算过零率（ZCR）- 衡量波形复杂度的指标
    let zeroCrossings = 0;
    for (let i = 1; i < channelData.length; i++) {
        if (channelData[i] * channelData[i-1] < 0) {
            zeroCrossings++;
        }
    }
    const zcr = zeroCrossings / channelData.length;
    
    // 计算峰值振幅
    let maxAmplitude = 0;
    let minAmplitude = 0;
    for (let i = 0; i < channelData.length; i++) {
        maxAmplitude = Math.max(maxAmplitude, channelData[i]);
        minAmplitude = Math.min(minAmplitude, channelData[i]);
    }
    
    console.log(`过零率: ${zcr} (越高则波形越复杂)`);
    console.log(`峰值范围: ${minAmplitude.toFixed(3)} 到 ${maxAmplitude.toFixed(3)}`);
    
    // 根据过零率判断内容类型
    if (zcr < 0.05) {
        return "纯音或简单波形 - 易于压缩";
    } else if (zcr < 0.15) {
        return "语音内容 - 压缩效率良好";
    } else {
        return "复杂音乐 - 需要更高比特率";
    }
}

知识点：音频压缩的核心挑战在于音频数据具有噪声特性，难以像文本那样通过重复模式压缩。有损压缩通过心理声学模型去除人耳不敏感的频率成分，可实现 5% 到 20% 的压缩比，是现代音频编码的主流方法。无损压缩只能达到 40% 到 60% 的压缩比，适用于需要精确还原的场景，如专业音频制作。

四、心理声学基础原理

心理声学研究人类如何感知声音，是现代音频压缩技术的理论基础。利用人耳的听觉特性，压缩算法可以在不影响主观音质的前提下大幅减少数据量。这些特性包括听觉阈值、频率掩蔽和时间掩蔽等效应。

心理声学掩蔽效应模拟：

// 模拟听觉阈值和人耳对不同频率的敏感度
class PsychoacousticModel {
    constructor() {
        // 人耳对不同频率的敏感度曲线（等响度曲线近似）
        this.frequencySensitivity = {
            20: 0.5,    // 20 Hz - 较低灵敏度
            100: 0.7,
            1000: 1.0,  // 1 kHz - 参考点，最高灵敏度
            4000: 1.05, // 4 kHz - 人耳最敏感
            10000: 0.85,
            20000: 0.4   // 20 kHz - 灵敏度下降
        };
    }
    
    // 获取特定频率的听觉敏感度
    getSensitivity(frequency) {
        // 简单的插值计算
        const freqs = Object.keys(this.frequencySensitivity).map(Number);
        if (frequency <= freqs[0]) return this.frequencySensitivity[freqs[0]];
        if (frequency >= freqs[freqs.length - 1]) return this.frequencySensitivity[freqs[freqs.length - 1]];
        
        for (let i = 0; i < freqs.length - 1; i++) {
            if (frequency >= freqs[i] && frequency <= freqs[i+1]) {
                const t = (frequency - freqs[i]) / (freqs[i+1] - freqs[i]);
                return this.frequencySensitivity[freqs[i]] * (1 - t) + 
                       this.frequencySensitivity[freqs[i+1]] * t;
            }
        }
        return 1.0;
    }
    
    // 计算可以丢弃的频率成分（低于听觉阈值）
    calculateDiscardableComponents(spectrum) {
        const discardable = [];
        for (let i = 0; i < spectrum.length; i++) {
            const freq = i * 44100 / (spectrum.length * 2);
            if (freq > 20000 || freq < 20) {
                discardable.push(i);
            }
        }
        return discardable;
    }
}

const psycho = new PsychoacousticModel();
console.log(`20 Hz 灵敏度: ${psycho.getSensitivity(20)}`);
console.log(`4 kHz 灵敏度: ${psycho.getSensitivity(4000)}`);
console.log(`15 kHz 灵敏度: ${psycho.getSensitivity(15000)}`);

语音与音乐的频率范围分析：

# 使用科学计算库分析语音和音乐的频率分布
import numpy as np

# 模拟语音信号的频率分布（集中在 300-3000 Hz）
speech_frequencies = np.random.normal(1500, 500, 10000)
# 模拟音乐信号的频率分布（分布更广）
music_frequencies = np.random.normal(8000, 5000, 10000)

def analyze_frequency_distribution(frequencies, name):
    mean_freq = np.mean(frequencies)
    std_freq = np.std(frequencies)
    pct_below_3k = np.sum(frequencies < 3000) / len(frequencies) * 100
    pct_above_10k = np.sum(frequencies > 10000) / len(frequencies) * 100
    
    print(f"\n{name} 频率分析:")
    print(f"  平均频率: {mean_freq:.0f} Hz")
    print(f"  标准差: {std_freq:.0f} Hz")
    print(f"  低于 3kHz 的比例: {pct_below_3k:.1f}%")
    print(f"  高于 10kHz 的比例: {pct_above_10k:.1f}%")

analyze_frequency_distribution(speech_frequencies, "语音信号")
analyze_frequency_distribution(music_frequencies, "音乐信号")

知识点：人耳对 1-4 kHz 频率范围最为敏感，对极低频和极高频敏感度较低。20 Hz 以下和 20 kHz 以上的频率可以直接丢弃而不影响感知质量。语音信号主要集中在 300 Hz 到 3 kHz，这使得语音编码可以用较低比特率实现良好质量。随着年龄增长，大多数人高频听觉上限从 20 kHz 降至 12-14 kHz，这让丢弃高频成分更加合理。

五、有损编码器的关键参数

有损音频编码器提供多种参数来控制压缩质量与文件大小的平衡。比特率是最核心的参数，可以分为平均比特率、恒定比特率和可变比特率三种模式。音频频率带宽和联合立体声模式也是重要的优化手段。

比特率配置示例：

// 不同音频类型和场景的比特率建议
const bitrateRecommendations = {
    // 语音编码场景
    speech: {
        narrowband: { min: 8000, max: 12000, recommended: 10000 },
        wideband: { min: 16000, max: 20000, recommended: 18000 },
    },
    // 音乐编码场景
    music: {
        monophonic: { min: 48000, max: 64000, recommended: 56000 },
        stereo: { min: 64000, max: 128000, recommended: 96000 },
        highQuality: { min: 128000, max: 256000, recommended: 192000 },
    }
};

// 计算不同比特率下的文件大小
function calculateFileSize(durationSeconds, bitrate, overheadFactor = 1.05) {
    // bitrate 单位: bps
    const rawSize = durationSeconds * bitrate / 8; // 转换为字节
    return rawSize * overheadFactor;
}

const songDuration = 210; // 3分30秒
const stereoQuality = bitrateRecommendations.music.stereo.recommended;
const fileSizeMB = calculateFileSize(songDuration, stereoQuality) / 1024 / 1024;

console.log(`3分30秒立体声音乐 @ ${stereoQuality/1000} kbps`);
console.log(`估算文件大小: ${fileSizeMB.toFixed(2)} MB`);

// 不同比特率的对比
const bitrates = [32000, 64000, 96000, 128000, 192000, 256000];
console.log("\n不同比特率的文件大小对比:");
bitrates.forEach(br => {
    const size = calculateFileSize(songDuration, br) / 1024 / 1024;
    const quality = br <= 64000 ? "低/语音质量" : br <= 128000 ? "中等质量" : "高质量";
    console.log(`  ${br/1000} kbps: ${size.toFixed(2)} MB (${quality})`);
});

联合立体声编码示例：

// 模拟 Mid-Side 立体声编码
class MidSideStereoEncoder {
    // 编码：将左右声道转换为中声道和侧声道
    encode(leftChannel, rightChannel) {
        const mid = new Float32Array(leftChannel.length);
        const side = new Float32Array(leftChannel.length);
        
        for (let i = 0; i < leftChannel.length; i++) {
            mid[i] = (leftChannel[i] + rightChannel[i]) / 2;
            side[i] = (leftChannel[i] - rightChannel[i]) / 2;
        }
        
        return { mid, side };
    }
    
    // 解码：从中声道和侧声道恢复左右声道
    decode(mid, side) {
        const left = new Float32Array(mid.length);
        const right = new Float32Array(mid.length);
        
        for (let i = 0; i < mid.length; i++) {
            left[i] = mid[i] + side[i];
            right[i] = mid[i] - side[i];
        }
        
        return { left, right };
    }
    
    // 分析编码效率
    analyzeEfficiency(left, right) {
        const encoder = new MidSideStereoEncoder();
        const { mid, side } = encoder.encode(left, right);
        
        // 计算平均振幅
        const leftAvg = Math.abs(left.reduce((a,b) => a + b, 0)) / left.length;
        const rightAvg = Math.abs(right.reduce((a,b) => a + b, 0)) / right.length;
        const sideAvg = Math.abs(side.reduce((a,b) => a + b, 0)) / side.length;
        
        console.log(`左声道平均振幅: ${leftAvg.toFixed(4)}`);
        console.log(`右声道平均振幅: ${rightAvg.toFixed(4)}`);
        console.log(`侧声道平均振幅: ${sideAvg.toFixed(4)} (比原始声道小，利于压缩)`);
        
        // 侧声道振幅越小，压缩效率越高
        const compressionGain = (leftAvg + rightAvg) / (sideAvg + 0.001);
        return compressionGain;
    }
}

// 模拟典型立体声音频（左右声道相似）
const length = 1000;
const left = new Float32Array(length);
const right = new Float32Array(length);

for (let i = 0; i < length; i++) {
    const signal = Math.sin(i * 0.01);
    left[i] = signal;
    right[i] = signal * 0.95; // 右声道轻微差异
}

const encoder = new MidSideStereoEncoder();
const gain = encoder.analyzeEfficiency(left, right);
console.log(`MS立体声编码效率提升: ${gain.toFixed(2)} 倍`);

知识点：可变比特率编码通过保持恒定质量让比特率动态变化，比恒定比特率提供更好的主观音质。平均比特率在文件大小和质量之间取得平衡。Mid-Side 联合立体声利用左右声道相似性，将两个声道编码为中声道和侧声道，侧声道可用更少比特表示，是无损编码方法。强度立体声在低频段合并声道以节省比特，但会损失部分空间定位信息，属于有损方法。低频增强通道专门用于低音炮，频率范围受限。

---

想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗？
持续关注，后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容，带你从新手快速进阶，轻松搞定前端开发！