准备做一个网页版聊天界面，表情啊、图片啊、上传文件啊都应该要有，视频就算了，语音还是要的。
本文记录的是在网页上用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>
立即播放代码
