準備做一個網頁版聊天界面，表情啊、圖片啊、上傳文件啊都應該要有，視頻就算了，語音還是要的。
本文記錄的是在網頁上用GitHub上的Recorder進行在線錄音和上傳到服務器，前幾天升了一下級，以後有時間再專門寫一篇記錄。
錄音代碼
本示例代碼支持PC、Android、IOS(僅Safari)中使用，如果用RecordApp可增加對IOS(微信瀏覽器、小程序)的支持。
看萬遍代碼不如行動一遍，新建一個html文件，把下面三段代碼複製到文件內，雙擊瀏覽器打開就能進行測試。
上傳服務器代碼
立即播放代碼
Recorder
GitHub地址：https://github.com/xiangyuecn/Recorder
在線測試: https://xiangyuecn.github.io/Recorder/
Recorder用於html5錄音，為一個純粹的js庫，支持大部分已實現getUserMedia的移動端、PC端瀏覽器，包括騰訊Android X5內核(QQ、微信)。
錄音默認輸出mp3格式，另外可選wav格式（此格式錄音文件超大）；有限支持ogg、webm、amr格式；支持任意格式擴展（前提有相應編碼器）。
小巧：如果對錄音文件大小沒有特別要求，可以僅僅使用錄音核心+wav編碼器，源碼不足300行，壓縮後的recorder.wav.min.js不足4kb。mp3使用lamejs編碼，壓縮後的recorder.mp3.min.js開啟gzip後54kb。
由於IOS(11.X、12.X)上只有Safari支持getUserMedia，其他瀏覽器均不支持H5錄音，因此額外針對IOS對Recorder進行了進一步的兼容封裝，升級成了RecordApp，用於支持微信（含瀏覽器、小程序web-view），另外RecordApp對Hybrid App也提供了更加優秀的支持。
由於RecordApp需要微信公眾(訂閱)號提供JsSDK錄音支持，所以開發難度會大些，但支持的環境更多。Recorder拿來就能用，具體使用哪個請參考下表：
最後
如果這個庫有幫助到您，請 Star 一下。
原文地址：https://www.cnblogs.com/xiangyuecn/p/10772227.html
閱讀更多 IT實戰聯盟 的文章
