HTML5網頁錄音和上傳到伺服器，支援PC、Android，支援IOS微信

xiangyuecn發表於2019-04-25
HTML網頁伺服器AndroidiOS

GitHub: github.com/xiangyuecn/… 線上測試: 點此測試

本文介紹的是我的一個開源js庫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簡介

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拿來就能用，具體使用哪個請參考下表：

支援 Recorder RecordApp
PC瀏覽器 √ √
Android瀏覽器 √ √
Android微信(含小程式) √ √
Android Hybrid App √ √
IOS Safari √ √
IOS微信(含小程式) √
IOS Hybrid App √
IOS其他瀏覽器
開發難度 簡單 複雜
第三方依賴 無 依賴微信公眾號

* 本文主要介紹使用Recorder來錄音，更加複雜強大的RecordApp請自行到github中查閱。

Recorder錄音測試

最後

詳細使用和教程請到GitHub檢視: github.com/xiangyuecn/…

如果這個庫有幫助到您，請 Star 一下。

相關文章