網站加速之網絡加速

景

如上圖，互聯網企業的國內業務肯定部署在國內，出海業務則一般部署在海外；具體部署區域，則一般根據用戶所在區域，選擇就近的區域。

源站部署到不同區域，選擇不同的機房，對于各地用戶來說，會帶來網絡距離及網絡線路質量的差異，從而對用戶的訪問響應時間也會產生一定差異。

網絡距離長及網絡線路質量差，則會給用戶帶來比較差的體驗，具體情況概括如下：

用戶訪問國內源站遇到的情況：

內容分類：
1、靜態內容包括：靜態網頁（html、css、js、圖片）、大文件、點播；

靜態內容訪問慢，因為靜態內容相對動態api接口請求的響應大小，一般大很多；

2、動態接口請求響應慢

原因：

用戶到源站網絡距離遠；
用戶到源站網絡線路質量差；
用戶訪問靜態內容大，本身需要時間；
源站負載大：因為源站帶寬、源站硬件資源等受限
用戶訪問國外源站遇到的情況，同用戶訪問國內源站遇到的情況外，還有其他特殊場景：

區域跨度更大；
網絡距離更遠；
網絡線路質量更差，不同區域訪問還有可能有訪問限制。

那么，下文介紹的就是我們常見的網絡加速方法。

ps：因為是要介紹的技術是通用技術，各家公有云都有自己的產品，所以在下文的介紹中，我為了避免重復的畫圖及描述，引用了各家公有云的文檔，在下文中有對應標示。

靜態加速

靜態加速，我們聽過最多的就是CDN，而且一般用的是CDN的靜態文件緩存加速功能。

CDN加速的核心就是就近訪問緩存：

讓用戶就近訪問到性能最佳的邊緣加速節點；
相對于源站，邊緣節點是部署在不同區域，離用戶更近的鏡像節點，可以緩存源站內容供用戶訪問。

CDN的加速原理（引用阿里云官網文檔）：

如圖：

請求過程：
1.當終端用戶向www.aliyundoc.com下的指定資源發起請求時，首先向Local DNS（本地DNS）發起請求域名www.aliyundoc.com對應的IP。
2.Local DNS檢查緩存中是否有www.aliyundoc.com的IP地址記錄。如果有，則直接返回給終端用戶；如果沒有，則向網站授權DNS請求域名www.aliyundoc.com的解析記錄。
3.當網站授權DNS解析www.aliyundoc.com后，返回域名的CNAME www.aliyundoc.com.example.com。
4.Local DNS向阿里云CDN的DNS調度系統請求域名www.aliyundoc.com.example.com的解析記錄，阿里云CDN的DNS調度系統將為其分配最佳節點IP地址。
5.Local DNS獲取阿里云CDN的DNS調度系統返回的最佳節點IP地址。
6.Local DNS將最佳節點IP地址返回給用戶，用戶獲取到最佳節點IP地址。
7.用戶向最佳節點IP地址發起對該資源的訪問請求。
8.返回用戶所需數據：

如果該最佳節點已緩存該資源，則會將請求的資源直接返回給用戶（步驟8），此時請求結束。
如果該最佳節點未緩存該資源或者緩存的資源已經失效，則節點將會向源站發起對該資源的請求。獲取源站資源后結合用戶自定義配置的緩存策略，將資源緩存到CDN節點并返回給用戶（步驟8），此時請求結束。

阿里云CDN產品架構圖，其他公有云產品架構圖差不多。

鏈路質量系統

鏈路質量探測系統會實時監測緩存系統中的所有節點和鏈路的實時負載以及健康狀況，并將結果反饋給調度系統，調度系統根據用戶請求中攜帶的IP地址解析用戶的運營商和區域歸屬，然后綜合鏈路質量信息為用戶分配一個最佳接入節點。

調度系統

支持策略中心、DNS、HTTPDNS和302調度模式。當終端用戶發起訪問請求時，用戶的訪問請求會先進行域名DNS解析，然后通過阿里云CDN的調度系統處理用戶的解析請求。

緩存系統

用戶通過收到的最佳接入節點訪問對應的緩存節點，如果節點已經緩存了用戶請求的資源，會直接將資源返回給用戶；如果L1（邊緣節點）和L2（匯聚節點）節點都沒有緩存用戶請求的資源，此時會返回源站去獲取資源并緩存到緩存系統，供后續用戶訪問，避免重復回源。分級緩存的部署架構可提高內容分發效率、降低回源帶寬以及提升用戶體驗。

支撐服務系統

支撐服務系統包括天眼、數據智能和配置管理系統，分別具備了資源監測、數據分析和配置管理能力。
資源監測：天眼可以對緩存系統上用戶業務運行的狀態進行監測。例如對CDN加速域名的QPS、帶寬、HTTP狀態碼等常見指標的監控。
數據分析：用戶可以分析CDN加速域名的TOP URL、PV、UV等數據。
配置管理：通過配置管理系統，用戶可以配置緩存文件類型、緩存時去參數緩存等緩存規則，以提升緩存系統的運作效率。

節點分布（引用華為云官網文檔）

華為云國內節點：

華為云國外節點：

cdn加速類型（引用華為云官網文檔）

網頁加速

網站的html、js、css、圖片等靜態資源加速。

大文件下載加速

APP更新，手游更新等，傳統的下載網站類業務。

點播加速

在線教育類網站、在線視頻分享網站、互聯網電視點播平臺、音樂視頻點播APP的音視頻點播服務，會涉及音視頻轉碼。

動態加速DCDN（Dynamic Route for Content Delivery Network）

web1.0時代，網站大部分是靜態內容，所以最開始的靜態加速就能滿足需求；隨著web2.0及移動互聯網時代的到來，網站中的動態請求占比逐漸提升。
那如果動態內容請求慢，是否有加速的辦法了？答案是有的，那就是動態加速。
如下圖，因為動態內容如果加了緩存，那么用戶訪問到的就不是最新的內容；
所以動態請求一般不做緩存加速的方案，而是通過優化邊緣節點到源站的回源鏈路的方式來加速；
cdn靜態緩存加速的邊緣節點一般是通過公網線路回源到源站；
動態加速網絡會把動態加速網絡中的所有邊緣節點互聯成一個私有網絡；
動態加速就是用戶就近訪問到邊緣節點后，通過這個私有網絡，智能選擇一條最優質量的線路回源，保證回源過程不會受到公網網絡的不確定因素的影響的方式來進行動態請求的加速；同時這個私有網絡也會進行一些長鏈接等協議優化的方式來加速。
ps：

動態加速并不能解決因為物理距離增加的響應時間變長的問題。
動態加速效果，需要業務自己實際對比測試，看滿不滿足業務需求。
圖片來自阿里云

全站加速(Whole Site Acceleration)

全站加速，其實就是同時具備靜態加速和動態加速的能力。
CDN初代產品具有的能力就是靜態加速，隨著升級支持動態加速的功能，就變成了全站加速。
不同的云廠商產品規劃不同，有些云廠商會把全站加速單獨拿出來作為一個產品，有些云廠商則把全站加速集成到了CDN產品中。
全站加速的過程如下圖：

用戶發起的請求如果是靜態請求，則會遵循CDN靜態加速的流程，主要是通過緩存來加速；
用戶發起的請求如果是動態請求，則會遵循動態加速的流程，主要是通過智能路由來加速。

ps：不同云廠商的動態加速計費方式和靜態加速計費方式可能不一樣，需要注意計費方式不同帶來的成本不同的問題。

圖片來自華為云：

全球加速（Global accelerator）

（引用aws官網文檔）

全球加速核心和全站加速中的動態加速的原理類似，大概如下：

把分布在全球的邊緣節點組成一個云廠商的私有網絡；
用戶會訪問到就近的邊緣節點；
邊緣節點會通過私有網絡回源到源站；
源站可以部署多個，部署到不同區域（region）；
回源可以根據策略回源到不同源站。
AnyCast IP可以綁定到不同區域的邊緣節點。

應用場景（圖片來自華為云）：

游戲業務

跨國辦公

總結

怎么選擇加速產品？
看業務需求：是要對靜態文件加速，還是要對動態接口加速，或者對靜態文件和動態接口都加速？
靜態文件加速選擇CDN靜態加速即可；
動態api加速選擇動態加速DCDN，同時一般會啟用靜態加速，即開啟全站加速；
動態api加速當然也可以選擇全球加速（Global accelerator）。
使用加速產品的注意事項：
確認廠商的計費模式及價格；這個關系到我們的成本；
需要看廠商是自建CDN還是融合CDN？這個關系到廠商產品的性價比；
各家CDN廠商的節點分布情況以及是否能夠提供節點清單？用來確認用戶訪問的節點是不是CDN廠商的節點？
確認使用加速產品前后的性能對比；可以使用RUM（真實用戶http訪問監控）數據做對比分析；
確認廠商對CDN邊緣節點的健康檢測及故障遷移能力；這個可能涉及到一種情況：我們的用戶訪問到了不能正常提供服務的CDN邊緣節點，即用戶此時不能正常訪問；如果廠商不能快速檢測到異常的CDN邊緣節點并把流量切換到其他正常CDN邊緣節點，就會影響我們業務的可用率；這種問題我們自己能否感知，取決于我們的RUM（真實用戶http訪問監控）的能力。
確認邊緣節點的緩存策略；比如說http狀態碼404、502、503是否緩存？
確認邊緣節點的回源策略；有些廠商的cdn靜態加速是通過公網回源，有些廠商會通過廠商自己的私有優化的網絡回源。
確認跨站請求配置、客戶端ip透傳配置；不同配置對業務有不同影響；
確認是否支持IP黑白名單功能；內部系統開啟CDN加速，可能需要用到IP白名單來限制其他IP的訪問；
確認是否部署CDN使用量實時監控；這個主要是避免異常的大流量或大帶寬引起的異常費用；比如平常帶寬1Gbps，突然漲到5Gbps甚至更大，那么費用也會對應增長。
選擇什么加速產品以及選擇哪家廠商可以根據自身業務的需求以及第2點中的注意事項（主要是各廠商的性價比）評估選擇即可。

作者 | 鄒永紅高級SRE專家

來源-微信公眾號:微鯉技術團隊

出處:https://mp.weixin.qq.com/s/mRshh-NjlkvsYd5f7dDPoA

. 使用內容分發網絡（CDN）

內容交付網絡是分布在不同地理位置的一組 Web 服務器，這些服務器根據最終用戶的位置向其提供 Web 內容。當您在單個服務器上托管網站時，所有用戶請求都將發送到同一硬件。因此，處理每個請求所需的時間會增加。最重要的是，當用戶物理上遠離服務器時，加載時間會增加。使用 CDN，用戶請求將重定向到最近的服務器。因此，內容可以更快地交付給用戶，網站可以更快地工作。這是一種相當昂貴但非常有效地優化加載時間的方法。

2.將您的網站移動到更好的主機

有三種可能的托管類型：

共享主機

虛擬專用服務器（VPS）托管

專用服務器

世界各地最常用的托管類型是共享托管。這是在短時間內以低廉的費用使您的網站上線的最便宜的方式。選擇快速Web主機以確保更好的優化至關重要。使用共享主機，您可以與也使用此服務器的其他站點共享 CPU、磁盤空間和 RAM。這就是共享主機不如VPS或專用服務器快的主要原因。

虛擬專用服務器和專用服務器要快得多。VPS使用多個服務器進行內容分發。擁有VPS，您可以與其他用戶共享服務器，并擁有自己的虛擬服務器部分，您的配置不會影響其他客戶端。如果您的網站具有平均流量，或者您的電子商務網站在某些時期具有流量高峰，則VPS將是您的最佳解決方案。

最昂貴的托管選項是使用專用服務器，該服務器可以是您自己的物理服務器。在這種情況下，您需要支付服務器租金并雇用系統管理員來維護它。

3.優化網站上圖像的大小

每個人都喜歡引人注目的圖像。在成功的電子商務網站的情況下，圖像是至關重要的一部分。產品頁面上的大量照片，圖像，圖形可以提高參與度。圖像使用的消極方面是它們通常是大文件，會減慢網站的速度。

在不影響圖像質量的情況下減小圖像大小的最佳方法是使用ImageOptim，JPEGmini或Kraken等工具壓縮圖像。該過程可能需要一些時間，但這是值得的。減小圖像大小的另一種方法是使用 HTML 響應式圖像<機密>和<大小>屬性，這些屬性根據用戶顯示屬性調整圖像大小。

4. 減少插件數量

插件是每個網站的通用組件。它們添加了第三方建議的特定功能。不幸的是，安裝的插件越多，運行它們所需的資源就越多。因此，網站運行速度較慢，并且還會出現安全問題。隨著時間的流逝，插件的數量會增長，而其中一些插件可能不再使用。我們建議您檢查已安裝的所有插件并刪除不必要的插件。首先，在您的頁面上運行性能測試，以找出哪些插件正在減慢您的網站速度。網站速度不僅取決于安裝插件的數量，還取決于它們的質量。盡量避免加載大量腳本和樣式或生成大量數據庫查詢的插件。最好的解決方案是只保留必要的，并確保它們保持最新。

5. 盡量減少 JavaScript 和 CSS 文件的數量

如果您的網站包含大量JavaScript和CSS文件，則當您的網站訪問者想要訪問特定文件時，會導致大量HTTP請求。這些請求由訪問者的瀏覽器單獨處理，并減慢網站工作速度。如果你減少JavaScript和CSS文件的數量，這無疑會加快你的網站速度。嘗試將所有JavaScript分組為一個，并對所有CSS文件進行分組。這將減少 HTTP 請求的總數。有很多工具可以快速縮小HTML，CSS和JavaScript文件。例如，您可以使用WillPeavy，Script Minifier或Grunt工具。

6. 使用網站緩存

如果有很多用戶一次訪問頁面，服務器工作緩慢，需要更多時間才能將網頁交付給每個用戶。緩存是將網站的當前版本存儲在主機上并顯示此版本直到網站更新的過程。這意味著網頁不會為每個用戶一遍又一遍地呈現。緩存的網頁不需要每次都發送數據庫請求。

網站緩存的方法取決于開發網站的平臺。例如，對于WordPress，您可以使用以下插件：W3 Total Cache或W3 Super Cache。如果您使用VPS或專用服務器，您還可以在常規設置下設置緩存。對于共享服務器，網站緩存通常不可用。

7. 實施 Gzip 壓縮

Gzip壓縮是減小文件大小的有效方法。它最大限度地減少了HTTP請求并減少了服務器響應時間。Gzip 在將文件發送到瀏覽器之前會壓縮文件。在用戶端，瀏覽器解壓縮文件并顯示內容。此方法可以處理您網站上的所有文件。您可以通過添加一些代碼行或通過名為gzip的實用程序在您的網站上啟用Gzip。

8. 內容管理系統中的數據庫優化

數據庫優化是提高性能的有效方法。如果您使用包含復雜插件的內容管理系統（CMS），則數據庫大小會增加，您的網站運行速度會變慢。例如，WordPress CMS存儲評論，博客文章和其他占用大量數據存儲的信息。每個CMS都需要自己的優化措施，并且還具有許多特定的插件。例如，對于WordPress，您可以考慮WP-Optimize。

9. 減少網頁字體的使用

網頁字體在網站設計中變得非常流行。不幸的是，使用Web字體會對頁面呈現的速度產生負面影響。Web 字體向外部資源添加額外的 HTTP 請求。以下措施將幫助您減少網頁字體流量的大小：

使用現代格式WOFF2用于現代瀏覽器;

僅包括網站上使用的字符集;

僅選擇所需的樣式

10. 檢測 404 錯誤

404 錯誤表示“找不到頁面”。當頁面的訪問內容不再存在時，托管將向瀏覽器或搜索引擎提供此消息。為了檢測和更正404錯誤，您可以使用錯誤檢測工具和插件。正如我們所提到的，其他插件可能會對您的網站速度產生負面影響，因此我們建議您通過外部工具運行資源以進行錯誤檢測。例如，Xenu的Link偵探，Google Webmaster Tools（GWT）和404 RedirectEd Plugin For WordPress。

檢測到所有 404 錯誤后，您需要評估它們生成的流量。如果這些死鏈接不再帶來任何訪問，因此永遠不會消耗您的服務器資源，那么您可以保持原樣。如果這些頁面仍然有一些流量，請考慮為外部鏈接設置重定向并修復內部鏈接的鏈接地址。

11. 減少重定向

網站重定向會創建額外的 HTTP 請求，從而對性能產生負面影響。我們建議將它們保持在最低限度或完全消除它們。首先，您應該通過運行站點掃描來識別頁面上的所有重定向。您可以使用尖叫青蛙快速識別重定向。然后，您必須檢查它們是否用于必要的目的，并僅保留關鍵目的。

言

想在網頁中實現實時音頻變聲效果該如何實現呢，之前遇到這種處理音視頻的需求，可能會想到需要借助C代碼實現。但是現在隨著瀏覽器性能的提升、web API的豐富，通過瀏覽器原生的API也可以操作音頻數據實現很多復雜的效果，為web音頻開發提供了更多的選擇。下面介紹幾種采用原生Web Audio API實現變聲效果的過程中嘗試的幾種方案，感興趣的同學一起來了解下吧。

說明：本文討論范圍為變聲場景中的變速變調方案，有其它兩種場景：變速不變調、變調不變速需求的同學請移步參考鏈接或其它方案

Web Audio API介紹

開始之前先簡單了解下Web Audio API，Web Audio API提供了一組在web上操作音頻的API，可以使開發者自選音頻數據來源，為音頻添加效果，使聲音可視化，為聲音添加空間效果等功能。音頻的輸入流可以理解為一組buffer，來源可以是讀取音頻文件產生到內存中的AudioBufferSourceNode，也可以是來自HTML中audio標簽的MediaElementAudioSourceNode，也可以是來自音頻流（例如麥克風）的MediaStreamAudioSourceNode。例如，采集自己設備上的麥克風聲音連接到揚聲器：

// 創建音頻上下文
const audioContext=new AudioContext();
// 獲取設備麥克風流
stream=await navigator.mediaDevices
  .getUserMedia({ audio: true})
  .catch(function (error) {
    console.log(error);
  });
// 創建來自麥克風的流的聲音源
const sourceNode=audioContext.createMediaStreamSource(stream);
// 將聲音連接的揚聲器
sourceNode.connect(audioContext.destination);

就可以對著麥克風說話聽到自己的聲音了。對上述來源數據流的處理被設計成一個個的節點（Node），具有模塊化路由的特點，需要添加什么樣的效果添加什么樣的node，例如一個最常見的操作是通過把輸入的采樣數據放大來達到擴音器的作用（GainNode），示例代碼：


// 創建音頻上下文
const audioContext=new AudioContext();
// 創建一個增益Node
const gainNode=audioCtx.createGain();
// 獲取設備麥克風流
stream=await navigator.mediaDevices
  .getUserMedia({ audio: true})
  .catch(function (error) {
    console.log(error);
  });
// 創建來自麥克風的流的聲音源
const sourceNode=audioContext.createMediaStreamSource(stream);
// 將聲音經過gainNode處理
sourceNode.connect(gainNode);
// 將聲音連接的揚聲器
gainNode.connect(audioContext.destination);
// 設置聲音增益，放大聲音
gainNode.gain.value=2.0;

以上只是連接了聲音放大的node，如果想要增加其它效果，可以繼續往上添加node連接connect，例如濾波器（BiquadFilterNode）、立體聲控制（StereoPannerNode）、對信號進行扭曲（WaveShaperNode）等等。這種模塊化設計提供了靈活的創建動態效果和復合音頻的方法，是不是有種變魔法的感覺，哪里修改點哪里（添加Node）非常方便。例如，以下展示了一個利用 AudioContext 創建四項濾波器節點（Biquad filter node）的例子：

var audioCtx=new (window.AudioContext || window.webkitAudioContext)();

// 創建多個不同作用功能的node節點
var analyser=audioCtx.createAnalyser();
var distortion=audioCtx.createWaveShaper();
var gainNode=audioCtx.createGain();
var biquadFilter=audioCtx.createBiquadFilter();
var convolver=audioCtx.createConvolver();

// 將所有節點連接在一起

source=audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);
distortion.connect(biquadFilter);
biquadFilter.connect(convolver);
convolver.connect(gainNode);
gainNode.connect(audioCtx.destination);

// 控制雙二階濾波器

biquadFilter.type="lowshelf";
biquadFilter.frequency.value=1000;
biquadFilter.gain.value=25;

可以看到為聲音流添加處理效果就像穿項鏈一樣，一個接一個，最后得到最終效果，實現效果可以參考官方樣例voice-change-o-matic。一個簡單而典型的 web audio 流程如下：

創建音頻上下文
在音頻上下文里創建源 — 例如, 振蕩器，流
創建效果節點，例如混響、雙二階濾波器、平移、壓縮
為音頻選擇一個目的地，例如你的系統揚聲器
連接源到效果器，對目的地進行效果輸出

變聲效果實現

首先回顧一下聲音的基礎知識，聲音是由物體振動產生的機械波，常接觸到的有以下三個特性：

頻率：頻率越大，音調越高；頻率越小，音調越低。
振幅：振幅越大，音量（響度）越大；振幅越小，音量越小。
音色：即波形，聽聲辨人的主要依據

這里說的變聲效果是改變聲音的音調，變聲效果根據不同的場景可以分為變速不變調、變調不變速以及變調又變速 3 種。變速是指把一個語音在時域上拉長或縮短，而聲音的采樣率、基頻以及共振峰都沒有發生變化。變調是指把語音的基因頻率降低或升高，共振峰做出相應的改變，采樣頻率不變。各種方案應用場景如下：

變速不變調：各種各樣的視頻播放器中的 2 倍速，0.5 倍速播放就是應用的語音變速不變調原理；當然變速不變調還應用于網絡電話 VOIP 中的應對網絡抖動，簡單的說，就是當網絡不好的時候，播放端從網絡中拉取到的數據少，緩存區的數據不夠用，這個時候就使用緩存的數據播放的慢一點。反之，緩存區數據過多，就播放的快一點。這部分的實現可以參照 webrtc 的 netEQ 模塊。平時在使用微信語音的時候應該能感受到網絡特別卡時，為了保持語音連續，會故意慢放語音。
變調不變速：變調不變速主要應用在聲效上，聲音提高音調將男聲變成女生，或則將女生變成男聲；另外，變調不變速配合其他一些音效算法，如 EQ，混響，tremolo 和 vibrato 可以實現變聲效果，比如 QQ 上的蘿莉音，大叔音等。
變速變調：改變聲音播放速率情況下，音調音色也會隨著改變，例如玩過磁帶的都知道，按快進功能會使聲音變尖提高音調，慢放功能使聲音變粗，降低音調。

前兩種實現都要求對聲音知識領域有更深的了解，聲音時域、頻域，信號的傅里葉變換變化都要去重新去復習一下，學習成本比較高，這里使用第3種方式，比較好接入。要改變聲音的播放速率，Web Audio API中提供了AudioBufferSourceNode有playbackRate屬性，可以設置音頻的播放速率，使用音頻上下文AudioContext.createBufferSource獲得實例，示例代碼如下：

const play=()=> {
  const audioSrc=ref("src/assets/sample_orig.mp3")
  const url=audioSrc.value
  const request=new XMLHttpRequest()
  request.open('GET', url, true)
  request.responseType='arraybuffer'

  request.onload=function() {
    const audioData=request.response
    const audioCtx=new (window.AudioContext || window.webkitAudioContext)();
  
    audioCtx.decodeAudioData(audioData, (audioBuffer)=> {
      let source=audioCtx.createBufferSource();
      source.buffer=audioBuffer;
      // 改變聲音播放速率，2倍播放
      source.playbackRate.value=2;
      source.connect(audioCtx.destination);
      source.start(0);
    });
  }
  request.send()
}

可以調整source.playbackRate.value的值來改變音調，大于1提高音調，小于1降低音調。

雖然實現了變聲效果，但是這種方式只適合播放音頻文件，或者能獲取到完整音頻流的情況，對于獲取麥克風這種持續輸入的聲音流并不適用，類似的還有SoundTouchJS，它是某大佬實現的SoundTouch的JS版本，使用也是要獲取完整音頻的數據流，作者也做了相應的解釋，參考鏈接

如何處理麥克風獲取的實時音頻流呢，這里可以借助Web Audio API中的ScriptProcessorNode，它允許使用 JavaScript 生成、處理、分析音頻。處理流程圖如下：

利用它將實時音頻流數據處理一下，得到慢放或加速的聲音流數據。示例代碼如下：

const audioprocess=async ()=> {
  const audioContext=new AudioContext();

  // 采集麥克風輸入聲音流
  let stream=await navigator.mediaDevices
    .getUserMedia({ audio: true})
    .catch(function (error) {
      console.log(error);
    });

  const sourceNode=audioContext.createMediaStreamSource(stream);

  const processor=audioContext.createScriptProcessor(4096, 1, 1);
  processor.onaudioprocess=async event=> {
    // 處理回調中拿到輸入聲音數據
    const inputBuffer=event.inputBuffer;
    // 創建新的輸出源
    const outputSource=audioContext.createMediaStreamDestination();
    const audioBuffer=audioContext.createBufferSource();
    audioBuffer.buffer=inputBuffer;
    // 設置聲音加粗，慢放0.7倍
    audioBuffer.playbackRate.value=0.7
    audioBuffer.connect(outputSource);
    audioBuffer.start();

    // 返回新的 MediaStream
    const newStream=outputSource.stream;
    const node=audioContext.createMediaStreamSource(newStream)
    // 連接到揚聲器播放
    node.connect(audioContext.destination)
  };
  // 添加處理節點
  sourceNode.connect(processor);
  processor.connect(audioContext.destination)
}

另外，還有一個利用Google開源jungle實現的改變音調的庫，并且還有各種混響效果，音頻可視化等炫酷功能，也是使用的Web Audio API實現，github鏈接地址放在這里了，有興趣也可以體驗下，畫面長這樣

總結

以上就是對Web Audio API的簡單介紹和使用的分析，以及采用Web Audio API實現聲音簡單變聲效果的幾種實現，大家有哪些更好的實現方案歡迎評論區一起交流！

參考

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

https://github.com/cwilso/Audio-Input-Effects

https://mdn.github.io/voice-change-o-matic/

https://github.com/cutterbl/SoundTouchJS

https://cloud.tencent.com/developer/news/818606

https://zhuanlan.zhihu.com/p/110278983

https://www.nxrte.com/jishu/3146.html

作者:付曉方

來源:微信公眾號:奇舞精選

出處:https://mp.weixin.qq.com/s/MuBqhyDUWbqU9p8e9LhdlQ

在線咨詢

上一篇：（原創）3種圖片滾動js純手寫的寫法
下一篇：自考畢業答辯評定標準很嚴？附答辯技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商