HTML 5のウェブページの録音とサーバーにアップロードして、PC、Androidを支持して、IOSの微信を支持します

GitHub: github.com/xiangyuecn/...オンラインテスト:このテストをクリック
本稿では、オープンソースjsライブラリRecorderを紹介し、Webページ上でオンライン録音とサーバへのアップロードを行います.
ろくおんコード
この例のコードは、PC、Android、IOS( Safari)で使用される場合、RecordAppで使用される場合、IOS( 、 )のサポートを追加することができる.
万遍コードを見るより行動してhtmlファイルを新規作成し、次の3つのコードをファイル内にコピーし、ブラウザをダブルクリックして開くと効果が得られます.

<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はhtml 5録音のために使用され、純粋なjsライブラリであり、getUserMediaが実装された 、PC の大部分をサポートし、 Android X5 (QQ、 )を含む.
録音デフォルト出力mp3 、さらにオプションwav (このフォーマットの録音ファイルは超大きい).ogg、webm、amr、 フォーマットを限定的にサポートします.任意のフォーマット拡張をサポートします(対応するエンコーダが前提).
コンパクト:録音ファイルのサイズに特に要求がなければ、wav +recorder.wav.min.js、ソースコードが300行未満、圧縮後のmp3が4 kb未満しか使用できません.lamejsはrecorder.mp3.min.jsを用いて符号化され、圧縮されたgzipはIOS(11.X、12.X)後54 kbをオンにする.SafariにはgetUserMediaしか対応していないため、他のブラウザではH 5録音はサポートされていないため、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でご確認ください.
最後に
詳細な使用とチュートリアルはGitHubで確認してください:github.com/xiangyuecn/…
このライブラリが役に立つ場合は、Starをクリックしてください.