項目開發中，前端攻城獅往往走在UI的最前沿，在看臉的潮流下，提高網頁的顏值，讓用戶過目不想忘那非前端不行了，當然少不了UI童鞋的腦洞大開。
HTML5的很多特性更是讓攻城獅盡情的發揮化妝的基本技能，當然性能還是要考慮的，畢竟要有讓更多的用戶同時觀賞的條件和能力，最近的項目中還是用到了web端獲取多媒體文件的功能。簡單描述一下，用戶對着麥克風說話，獲取語音流，經過編碼獲取base64傳給后台的星弟們，調取模型然后返回給前台分析的結果，可能有文本結果，也可能有數字結果，畢竟維度那么多，比如流利不流利，准確不准確，感情是不是豐富等等，我們暫時不care，因為能看到這個文章的人，需要的結果肯定不一樣。萬變不離其宗，知道怎么拿到即可。
大致流程：
1、首先我們要從瀏覽器獲取麥克風或者攝像頭權限，出於隱私和安全，這是相當必要的通過getUserMedia，我們拿到了獲取麥克風權限拿到了音頻流stream。
2、通過AudioContext獲取一個音頻接收的實例context，音頻實例我們拿到了，下一步是怎么設置緩沖區，這是要獲取音頻buffer最原始二進制流文件的地方。
3、通過context.createScriptProcessor產生了一個recorder，createScriptProcessor的三個參數分別表示緩沖區大小，輸入通道數，輸出通道數，緩沖區大小我們就不要隨便寫了，雖然正常是2的冪次，但是我們不知道什么時候是最好的，畢竟設備有區別，設為0讓他自適應，通道數設置為1即可。
4、然后recorder和context.destination連接一下這個destination表示context中所有音頻（節點）的最終目標節點，一般是音頻渲染設備，比如揚聲器。通過recorder的onaudioprocess事件就可以取到音頻流了。當然為了獲取到音頻的音量大小到目前為止我們已經獲取了基本的條件，距離成功只差和stream關聯起來。
5、context的createMediaStreamSource我們取audioInput,接收一下stream，畢竟流文件已經來了，context不能閑着，打通最后一關，audioInput和recorder連接一下整個流程完成閉環。
參考文檔：
3、github干貨