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 是我們生活中大量使用的一種音頻格式，英文全稱為：MPEG（Moving Picture Experts Group）Audio Layer 3，存儲的檔案字尾名為：.mp3。它在存儲時舍棄了一部分對人類聽覺不重要的音頻資料，進而能将音頻資料壓縮存儲成較小的檔案。是一種有損格式。它的比特率通常位于128kbps和320kbps之間。
MP3具有很多優勢，大部分數位裝置都可以播放MP3格式的音頻，而且單個檔案所占用的存儲空間較小，使它分享和傳播十分的便捷。他的缺點也顯而易見，由于是一種有損格式，帶來了音質上的損失（尤其是高頻部分），雖然許多場景下MP3格式提供的音質已經足夠了，但是如果要追求更高的音質，就不能使用MP3格式了。
AAC，進階音頻編碼，全稱：Advanced Audio Coding，與其相關的檔案字尾名有：.aac，.mp4，.m4a。AAC是一種高壓縮比的編碼格式，屬于有損格式，AAC作為MP3的後繼者被設計出來，相較于MP3格式，它的音質表現比MP3更好，可選擇的采樣率範圍比MP3更大，且支援更多的比特率。它的算法更先進，在相同比特率的情況下，使用AAC的音質要比MP3的好。但即便如此，它依舊是一種有損格式。而且它在裝置上支援的程度沒有MP3廣，一些裝置上需要安裝對應的解碼器才能播放。
全稱：Waveform Audio File Format，簡稱WAV，與其相關的檔案字尾名為：.wav。WAV可以稱為是一種無損格式，因為它編碼時不會對原資料進行壓縮，是以也就沒有資料會丢失。但是如果音頻資料本身已經“有損”了（從有損格式轉換過來等情況下），它會原樣存儲，是以存儲下來的音頻資料是有損的。它的優點便是不會對資料進行壓縮，原樣存儲、還原，自由度較高，由于是由微軟和IBM開發的，在windows平台有着廣泛的支援，缺點便是占用的存儲空間較大。
全稱：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是英語 Audio Video Interleave 的首字母縮寫，檔案字尾名為：.avi。由微軟在1992年推出。它對視訊采用了一種有損壓縮方式，壓縮率較高，畫面品質一般，應用範圍較廣，在windows平台上受到廣泛支援。但是由于其壓縮标準不統一，會導緻在播放解碼時出現莫名其妙的問題，需要使用者手動安裝合适的解碼器。
Flash Video（簡稱FLV），檔案字尾名為：.flv，是一種網絡視訊格式，用作流媒體格式，它的出現有效地解決了視訊檔案導入 Flash 後，使導出的SWF檔案體積龐大，不能在網絡上有效使用等缺點。由于它體積較小、是以在網絡上傳輸的帶寬成本也小，大量的視訊網站都在使用這種格式，包括油管、b站、niconico、優酷等等。以前通常會将flv視訊包在一個 Flash 中進行播放，但是由于 Flash 存在着包括大量耗電以及資訊安全等諸多問題，2011年 Adobe 公司宣布停止開發個人電腦平台以外的 Flash Player，許多公司也大規模放棄使用 Flash 播放器，改用HTML5。開發者可以使用 flv.js 在自己的 Web 平台上播放該格式的視訊。
WebM 是一個開放、免費的視訊格式，檔案字尾名為：.webm，它能提供高品質的視訊壓縮以配合HTML5使用。前面提到 Flash 技術已經被淘汰，為了配合HTML5，能在Web平台上播放視訊，谷歌贊助開發了 WebM。它采用了VP8及其後續版本VP9作為視訊編解碼格式。目前，Edge、Firefox、Chrome浏覽器已經支援播放WebM的視訊，Safari有限支援。
參考caniuse
VP8是一個開放的影像編碼格式，由 On2 Technologies 開發，後來該公司被谷歌收購。它能以較少的資料提供高品質的視訊，而且隻需較小的處理能力即可播放視訊。VP9則是為了替代VP8産生的，在其基礎上做了許多改進，相比于 H.265 編碼，許多浏覽器都支援 VP9（WebM）視訊格式。
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音視訊相關的内容，踩了不少坑，覺得開發這方面内容還是需要學習不少相關知識的。寫這篇文章是想與和我一樣想要開發音視訊應用的開發者，分享知識，共同學習，也十分歡迎大家提出寶貴的意見。感謝大家的閱讀！