備做一個網頁版聊天界面，表情啊、圖片啊、上傳文件啊都應該要有，視頻就算了，語音還是要的。

本文記錄的是在網頁上用GitHub上的Recorder進行在線錄音和上傳到服務器，前幾天升了一下級，以后有時間再專門寫一篇記錄。

錄音代碼

本示例代碼支持PC、Android、IOS(僅Safari)中使用，如果用RecordApp可增加對IOS(微信瀏覽器、小程序)的支持。

看萬遍代碼不如行動一遍，新建一個html文件，把下面三段代碼復制到文件內，雙擊瀏覽器打開就能進行測試。

<!-- 先加載js錄音庫，注意：你應該把js clone到本地使用 --><meta charset="utf-8" />
<script src="https://xiangyuecn.github.io/Recorder/recorder.mp3.min.js"></script>
<input type="button" onclick="startRec()" value="開始錄音">
<hr>
<input type="button" onclick="playRec()" value="結束并播放">
<input type="button" onclick="uploadRec()" value="結束并上傳">
<script>
var rec;
function startRec(){
 rec=Recorder();//使用默認配置，mp3格式
 
 //打開麥克風授權獲得相關資源
 rec.open(function(){
 //開始錄音
 rec.start();
 },function(msg,isUserNotAllow){
 //用戶拒絕了權限或瀏覽器不支持
 alert((isUserNotAllow?"用戶拒絕了權限，":"")+"無法錄音:"+msg);
 });
};
</script>

上傳服務器代碼

<script>
function uploadRec(){
 //停止錄音，得到了錄音文件blob二進制對象，想干嘛就干嘛
 rec.stop(function(blob,duration){
 /*
 blob文件對象，可以用FileReader讀取出內容
 ，或者用FormData上傳，本例直接上傳二進制文件
 ，對于普通application/x-www-form-urlencoded表單上傳
 ，請參考github里面的例子
 */
 var form=new FormData();
 form.append("upfile",blob,"recorder.mp3"); //和普通form表單并無二致，后端接收到upfile參數的文件，文件名為recorder.mp3
 
 //直接用ajax上傳
 var xhr=new XMLHttpRequest();
 xhr.open("POST","http://baidu.com/修改成你的上傳地址");//這個假地址在控制臺network中能看到請求數據和格式，請求結果無關緊要
 xhr.onreadystatechange=function(){
 if(xhr.readyState==4){
 alert(xhr.status==200?"上傳成功":"測試請先打開瀏覽器控制臺，然后重新錄音，在network選項卡里面就能看到上傳請求數據和格式了");
 }
 }
 xhr.send(form);
 },function(msg){
 alert("錄音失敗:"+msg);
 });
};</script>

立即播放代碼

<script>
function playRec(){
 //停止錄音，得到了錄音文件blob二進制對象，想干嘛就干嘛
 rec.stop(function(blob,duration){
 var audio=document.createElement("audio");
 audio.controls=true;
 document.body.appendChild(audio);
 
 //非常簡單的就能拿到blob音頻url
 audio.src=URL.createObjectURL(blob);
 audio.play();
 },function(msg){
 alert("錄音失敗:"+msg);
 });
};</script>

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

面，我們通過Web Audio API（網頁音頻接口）制作了一個簡單的剛琴小程序。（見《利用Web Audio API，使用純ECMAScript 6，無需第三方庫，開發一個鋼琴小程序》）

我們現在看看Web Audio API（網頁音頻接口）是如何來處理錄音的。有些聲音是很難使用振蕩器來重現的，所以在許多情況下必須使用錄制的聲音來重現真實的聲音。格式可以是".MP3"，".ogg"，".wav"等，本人建議使用".MP3"，因為它是輕量級，有廣泛支持且具有很好的音質。

你不能像圖片一樣簡單地通過一個網址得到聲音。我們需要通過發送一個XMLHttpRequest請求來得到文件，解碼數據，并放入緩沖區。

讓我們看看構造函數: 我們收到我們在聲音類中所做的Context；收到的Url列表將被加載；一個空數組用于緩沖。

我們有兩個方法：loadsound和loadAll。 loadAll循環通過URL列表來調用loadSound方法。它重要的是傳遞索引，我們才能在不管哪個請求首先加載下把緩沖的聲音放入正確的數組元素。這也讓我們看到最后一個請求意味著緩沖區加載的完成。

然后你可以調用loaded()方法來做一些像隱藏加載指示器之類事情。最后在播放時通過getSoundByIndex(index) 方法從播放緩沖區中獲取相應的值。

decodeAudioData方法是新的語法，現在還不能在Safari中工作。

context.decodeAudioData(audioData).then(function(decodedData) {

// use the decoded data here

});

然后我們必須為聲音創建類。現在我們有完整的類來處理錄音：

構造函數接收了Context和Buffer緩沖。我們調用createBufferSource()方法來代替我們以前做的createOscillator()方法。我們使用getSoundByIndex()方法來獲取緩沖的音符（從緩沖數組中來的元素）?，F在我們創建緩沖區（而不是振蕩器），設置緩沖區，然后將其連接到目標（或增益和其他濾波器）。

現在我們要創建緩沖區實例并調用loadAll方法來加載所有的聲音到緩沖區。我們同時也要用getSoundById方法來獲取我們真正所需要的，把它傳送給聲音類并調用play()方法。ID可以作為按鈕上的數據屬性存儲，你點擊則播放聲音。

這里有一個在線實例，使用了上述緩沖區、錄制的音符等技術（由于音頻資源較多，未完整實現，僅供參考）：

http://www.ikinsoft.com/3ddemo/recoder.html

切圖公司一個項目中碰到一個類似蘋果手機上SIRI 機器人的項目制作，所以首先想到的是html5 有個audio標簽，于是找到了一個有用的demo。

最后項目順利完成。附demo

http://developer.qietu.com/html/f3/html5audio/

---

關注我們，我們將附送我們工作中的非常多的實用的demo。

ad~

只教web前端實戰的切圖學院（qietu.org）