HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能

<!-- 先加载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>