准备做一个网页版聊天界面，表情啊、图片啊、上传文件啊都应该要有，视频就算了，语音还是要的。

本文记录的是在网页上用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

在线测试: 点此测试

Recorder

getUserMedia

移动端

PC端浏览器

腾讯Android X5内核

QQ

微信

录音默认输出

mp3格式

wav格式

ogg

webm

amr

小巧：如果对录音文件大小没有特别要求，可以仅仅使用

录音核心

wav编码器

recorder.wav.min.js

mp3

lamejs

recorder.mp3.min.js

gzip

由于

IOS(11.X、12.X)

Safari

getUserMedia

IOS

Recorder

RecordApp

浏览器

小程序web-view

RecordApp

Hybrid App

RecordApp

JsSDK

Recorder

* 可到github中查阅

RecordApp

xiangyuecn/Recorder/app-support-sample

最后

如果这个库有帮助到您，请 Star 一下。