前言
21世纪以来，随着网络基础设施的不断完善，3G、4G、乃至现今5G网络的普及，互联网彻底改变了我们的生活。以前在家里看一部电影需要买DVD和播放机，现在直接打开浏览器，进各大视频网站就可以看了，而且有非常丰富的视频资源供你选择。与此同时也涌现了许许多多的应用场景：远程会议、远程医疗、在线教育等等。许多开发者也纷纷开始在Web平台上开发自己的音视频应用。为此我想来分享一系列和Web端开发音视频相关的内容，和大家共同学习。本章我会分享一些音视频的基础知识，水平有限，欢迎大家指出错误或者提建议哦！
音频
人耳能听到的声音我们都可以称之为音频，我们经常会用这个词去形容录制好可播放的一段声音。下面我会介绍一些与音频相关的重要概念。包括采样率、比特率（码率）和常见的音频编码。这些是我们在制作、存储、和传输音频所必须了解的内容。
采样率
采样率（也称为采样速度或者采样频率）定义了每秒从连续信号中提取并组成离散信号的采样个数，它用赫兹（Hz）来表示。采样频率的倒数叫作采样周期或采样时间，它是采样之间的时间间隔。注意不要将采样率与比特率（bit rate，亦称“位速率”）相混淆。（取自维基百科）
通俗来讲，采样率的大小对我们听一个音频最直观的影响就是”清晰度“或者说音频的”还原程度“。理论上录制时的采样率越高，能描述的声波频率就越接近原声，更能还原声音原本的样子，听感上更接近临场听这个声音。但是人耳一般能辨别的采样率也有上限，采样率达到人耳能分辨的阈值后，再高的采样率人耳也难以听出其中的差别。
一般情况下录音设备决定了一个音频采样率的上限。生活中，打电话和播放一首高清音乐就能体现出采样率的不同，我们明显能听出来高清音乐更加的”清晰“，更好的还原出声音，这是因为电话麦克风采样率一般为8000赫兹左右，而一首音乐是在专业的录音棚中由专门的录音设备录制，采样率通常是数万赫兹。
比特率（码率）
比特率，又称码率，我们先看看wiki上对比特率的解释：
比特率是单位时间播放连续的媒体如压缩后的音频或视频的比特数量。在这个意义上讲，它相当于术语数字带宽消耗量，或吞吐量。
比特率规定使用“比特每秒”（bit/s或bps）为单位，经常和国际单位制词头关联在一起，如“千”（kbit/s或kbps），“兆”(百万)（Mbit/s或Mbps），“吉”（Gbit/s或Gbps）和“太”（Tbit/s或Tbps）。
虽然经常作为“速度”的参考，比特率并不测量“‘距离’/时间”，而是被传输或者被处理的“‘二进制码数量’/时间”，所以应该把它和传播速度区分开来，传播速度依赖于传输的介质并且有通常的物理意义。（取自维基百科）
维基上的解释已经非常清楚了。比特率与音频文件占用的存储空间成正比，比特率越高，代表这个音频每秒包含数据量越大，通常也表示这个音频更清晰，音质更好。
不考虑外部因素，一段音频的音质会与采样率和比特率有着直接关系，但是一味的追求较高的采样率和比特率也会带来存储空间和带宽的浪费。所以在录制音频时，我们需要结合实际情况，根据应用场景选择合适的比特率和采样率，这样才能在满足需求的同时降低成本。
音频编码
音频编码就是指将获取到的音频数据按约定格式进行转换。编码时通常会对数据进行一定程度上的压缩，也因此分为2类：有损格式和无损格式。不同的压缩算法，对数据的处理方式也不同。有些编码方式会丢弃一部分音频数据，压缩率较高，从而达到减小占用的存储空间的目的。而无损格式正相反，指的是编码后，在下次播放进行解码得到的数据与原音频数据一致，没有损失，但是因此往往压缩率较低，存储时占用的空间较大。同一段音频，一般使用有损格式比使用无损格式编码存储后所占用的存储空间小。这里也需要注意，现在有很多编码格式转换工具，如果你将有损格式转换为无损格式，他只是将已经有损的数据作为基础，用无损的格式存储下来，所以他本质上音频数据还是已经有缺失的，也就是”有损的“，不能把有损格式存储的数据恢复到原来无损的样子。
常见的有损格式：MP3，AAC，Ogg
常见的无损格式：WAV，FLAC，APE
下面简单介绍一下几种常见的编码格式：
MP3
MP3 是我们生活中大量使用的一种音频格式，英文全称为：MPEG（Moving Picture Experts Group）Audio Layer 3，存储的文件后缀名为：.mp3。它在存储时舍弃了一部分对人类听觉不重要的音频数据，从而能将音频数据压缩存储成较小的文件。是一种有损格式。它的比特率通常位于128kbps和320kbps之间。
MP3具有很多优势，大部分数码设备都可以播放MP3格式的音频，而且单个文件所占用的存储空间较小，使它分享和传播十分的便捷。他的缺点也显而易见，由于是一种有损格式，带来了音质上的损失（尤其是高频部分），虽然许多场景下MP3格式提供的音质已经足够了，但是如果要追求更高的音质，就不能使用MP3格式了。
AAC
AAC，高级音频编码，全称：Advanced Audio Coding，与其相关的文件后缀名有：.aac，.mp4，.m4a。AAC是一种高压缩比的编码格式，属于有损格式，AAC作为MP3的后继者被设计出来，相较于MP3格式，它的音质表现比MP3更好，可选择的采样率范围比MP3更大，且支持更多的比特率。它的算法更先进，在相同比特率的情况下，使用AAC的音质要比MP3的好。但即便如此，它依旧是一种有损格式。而且它在设备上支持的程度没有MP3广，一些设备上需要安装对应的解码器才能播放。
WAV
全称：Waveform Audio File Format，简称WAV，与其相关的文件后缀名为：.wav。WAV可以称为是一种无损格式，因为它编码时不会对原数据进行压缩，因此也就没有数据会丢失。但是如果音频数据本身已经“有损”了（从有损格式转换过来等情况下），它会原样存储，所以存储下来的音频数据是有损的。它的优点便是不会对数据进行压缩，原样存储、还原，自由度较高，由于是由微软和IBM开发的，在windows平台有着广泛的支持，缺点便是占用的存储空间较大。
FLAC
全称：Free Lossless Audio Codec，简称FLAC，相关的文件后缀名为：.flac。FLAC是一种无损压缩格式，不同于AAC和MP3等有损压缩格式，它对数据进行压缩后不会损失数据。flac是一种自由开放的编码格式，它支持任意的采样率，可以按1Hz的幅度进行微调。我们也可以自由设定flac的压缩率，类似gzip，选择高压缩率的情况下，文件体积越小，但是解压需要耗费的时间越多。选择低压缩率时，文件体积大，但是解压耗费的时间短。FLAC在现代设备上有着广泛的支持，许多平台的无损音乐都采用这种格式，但是它在一些老设备上的支持不足，可能需要安装特定的编解码器来使用。
视频
视频（英语：video）是泛指将一系列的静态影像以电信号方式加以捕捉、纪录、处理、存储、发送与重现的各种技术。（取自维基百科）
视频在我们现在的生活中无处不在，我们要制作一段视频，开发与其相关的应用也需要了解相关的知识。下面我会介绍一些视频的基础知识，包括逐行扫描和隔行扫描、分辨率、帧率等等。为了更好的传输和存储，视频也有一系列的格式和编码方式，我也会介绍几种常见的格式。
逐行扫描和隔行扫描
逐行扫描和隔行扫描，是将图像呈现在显示设备上的2种方式，如同它们的名字一样，逐行扫描指的是显示器会扫描画面中的每一行，完整的显示每一帧的画面，但是由于完整显示会占用大量的带宽，部分显示设备（如早期的电视），无法流畅连贯的显示画面，因此需要用到隔行扫描了。参考下方的gif，这是被放慢了的隔行扫描。隔行扫描便是设备交换扫描偶数行和奇数行进行显示。我们平时所见到的清晰度有720p、1080p、720i、1080i，前面的数字指的就是垂直方向有多少条水平扫描线（这里是垂直方向的像素），而后面的i就是指的隔行扫描（interlaced scan），p指的是逐行扫描（progressive scan）。理论上隔行扫描的视频体积和带宽消耗比逐行扫描要小一半，但是隔行扫描人眼容易感知到闪烁，而且在显示移动的物体时，物体周围会有晃动现象，整体画面效果不如逐行扫描。
分辨率
分辨率（英语：Image resolution）泛指量测或显示系统对细节的分辨能力。此概念可以用时间、空间等领域的量测。日常用语中之分辨率多用于影像的清晰度。分辨率越高代表影像质量越好，越能表现出更多的细节；但相对的，因为纪录的信息越多，文件也就会越大。（取自维基百科）
视频是由一帧帧图像构成的，因此也有分辨率的概念。描述分辨率的单位有：dpi（点每英寸）、lpi（线每英寸）和ppi（每英寸像素）。日常生活中，通常会用 1920x1080 （水平像素数x垂直像素数）这样的方式来描述显示分辨率，分辨率与视频占用的存储空间成正比，分辨率越高的视频传输和存储成本越高，画面也越清晰。
帧率
帧率是用于测量显示帧数的度量。测量单位为“每秒显示帧数”（Frame per Second，FPS）或“赫兹”，一般来说FPS用于描述视频、电子绘图或游戏每秒播放多少帧（取自维基百科）
聊到帧率，我们先要知道为什么我们看视频，它的画面是“动”的。我们平时看到的视频、动画、gif动图等等，它们其实都是不停的在播放一张张静止的图片，欺骗了我们的眼睛，让我们的眼睛看上去它们在“动”。这是因为人眼有一种视觉暂留效果，当我们用自己的眼睛看一个物体时，它会成像于视网膜上，并由视神经输入我们的大脑，让大脑感知到这个“画面”，但当物体移去时，视神经对物体的印象不会立即消失，而是会在很短的时间内保留下来，人眼的这种性质被称为“视觉暂留效果”。因此当每秒连续呈现约10至12帧的画面时，我们的眼睛就会认为它是连贯的，就“动”起来了。
通常来讲，帧率越高，我们看到的画面就会越流畅，我在下方放2张动图大家可以对比一下，这是一个黑色圆形从左移动到右边的一个动画，根据帧率设置过渡帧，上方的动画帧率只有5fps，下方的是30fps的。
可以发现5fps的那张图我们会觉得他很卡，而30fps那张看上去就流畅许多，黑色圆形的”移动“很连贯，这就是帧率高低所带来的差别。我们平时看的视频或者电影通常有24帧~30帧左右，现在的视频网站和一些电影也支持更高的帧率，比如b站和油管都支持1080p60帧的视频。我们有时候看视频或者玩游戏会突然觉得很”卡“，其实这个时候就是因为这段时间内画面的帧率突然大幅降低，比如因为网络不好丢包了，或者是设备性能原因等等，画面的fps突然降低，人眼感知到了这个变化，就导致我们认为画面变”卡“了。
比特率（码率）
视频同样有比特率的概念，与音频相同，比特率越高的视频，意味着画质和分辨率更优秀，观感更好，传输和存储的成本也更高。
视频格式&编码格式
前面介绍过，视频其实就是由一帧帧画面组成的，因此一个视频的数据量往往是非常庞大的，随着视频视频时长、比特率的增加，视频的数据量也会不断增多。为此我们需要强大的视频编码格式对视频进行压缩，常见的有：VP8/VP9，H.264/H.265。同时，视频文件还需要考虑到声音，字幕，版权等等多方面因素，非常复杂。为了方便视频的传输与存储，诞生了许许多多的视频格式，常见的有：MP4、AVI、WebM、MOV、WMV、RMVB、FLV等等。下面我来简单介绍其中的几种。
AVI
AVI是英语 Audio Video Interleave 的首字母缩写，文件后缀名为：.avi。由微软在1992年推出。它对视频采用了一种有损压缩方式，压缩率较高，画面质量一般，应用范围较广，在windows平台上受到广泛支持。但是由于其压缩标准不统一，会导致在播放解码时出现莫名其妙的问题，需要用户手动安装合适的解码器。
FLV
Flash Video（简称FLV），文件后缀名为：.flv，是一种网络视频格式，用作流媒体格式，它的出现有效地解决了视频文件导入 Flash 后，使导出的SWF文件体积庞大，不能在网络上有效使用等缺点。由于它体积较小、因此在网络上传输的带宽成本也小，大量的视频网站都在使用这种格式，包括油管、b站、niconico、优酷等等。以前通常会将flv视频包在一个 Flash 中进行播放，但是由于 Flash 存在着包括大量耗电以及信息安全等诸多问题，2011年 Adobe 公司宣布停止开发个人电脑平台以外的 Flash Player，许多公司也大规模放弃使用 Flash 播放器，改用HTML5。开发者可以使用 flv.js 在自己的 Web 平台上播放该格式的视频。
WebM
WebM 是一个开放、免费的视频格式，文件后缀名为：.webm，它能提供高质量的视频压缩以配合HTML5使用。前面提到 Flash 技术已经被淘汰，为了配合HTML5，能在Web平台上播放视频，谷歌赞助开发了 WebM。它采用了VP8及其后续版本VP9作为视频编解码格式。目前，Edge、Firefox、Chrome浏览器已经支持播放WebM的视频，Safari有限支持。
VP8/VP9
VP8是一个开放的影像编码格式，由 On2 Technologies 开发，后来该公司被谷歌收购。它能以较少的数据提供高质量的视频，而且只需较小的处理能力即可播放视频。VP9则是为了替代VP8产生的，在其基础上做了许多改进，相比于 H.265 编码，许多浏览器都支持 VP9（WebM）视频格式。
H.264/H.265
H.264，高级视频编码（英语：MPEG-4 Part 10, Advanced Video Coding，缩写为MPEG-4 AVC），如今它已经成为高精度视频录制、压缩和发布的最常用格式之一，它能用较低的码率提供高质量的图像，容错能力强，网络适应性强，在同等图像质量的条件下，H.264 的压缩比是 MPEG-4 的1.5～2倍。因此它能够应用于各种各样的网络和系统的各应用上，包括低和高比特率，低和高分辨率视频，广播，DVD存储等等。H.265 ，又称为高效率视频编码，是 H.264 的继任者，它不仅提升画面质量，同时也能达到H.264两倍的压缩率，支持4K甚至更高分辨率的视频，最高可达8K。但是目前支持播放 H.265 的设备较少，需要安装对应的解码器才能播放。
结尾
音视频领域在蓬勃发展，用户对音视频的要求也在不断提高：更高的画质音质，更高的分辨率（4k、8k），更低的时延等等都在不断促进着这一领域的发展。与音视频相关的知识也非常复杂深奥，远非一两篇文章能讲清楚的。我的水平有限，近期也是在开发Web音视频相关的内容，踩了不少坑，觉得开发这方面内容还是需要学习不少相关知识的。写这篇文章是想与和我一样想要开发音视频应用的开发者，分享知识，共同学习，也十分欢迎大家提出宝贵的意见。感谢大家的阅读！
「本文为个人原创，首发于声网开发者社区」
（文中部分图片来自互联网，如有侵权请联系删除。）