前言
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无限反对。
参考caniuse
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音视频相干的内容，踩了不少坑，感觉开发这方面内容还是须要学习不少相干常识的。写这篇文章是想与和我一样想要开发音视频利用的开发者，分享常识，独特学习，也非常欢送大家提出贵重的意见。感激大家的浏览！
「本文为集体原创，首发于声网开发者社区」
（文中局部图片来自互联网，如有侵权请分割删除。）