欢迎光临小鱼网个人网站!

登录/注册
html5网页录音和上传到服务器

本示例代码支持PC、Android、IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持.

【1】加载框架

在需要录音功能的页面引入压缩好的recorder.***.min.js文件即可 (注意:需要在https等安全环境下才能进行录音)

<script src="recorder.mp3.min.js"></script>

或者直接使用源码(src内的为源码、dist内的为压缩后的),可以引用src目录中的recorder-core.js+相应类型的实现文件,比如要mp3录音:

<script src="src/recorder-core.js"></script> <!--必须引入的录音核心-->
<script src="src/engine/mp3.js"></script> <!--相应格式支持文件-->
<script src="src/engine/mp3-engine.js"></script> <!--如果此格式有额外的编码引擎的话,也要加上-->

【2】调用录音

var rec=Recorder();//使用默认配置,mp3格式
rec.open(function(){//打开麦克风授权获得相关资源
    rec.start();//开始录音    
    setTimeout(function(){        
        rec.stop(function(blob,duration){//到达指定条件停止录音
            console.log(URL.createObjectURL(blob),"时长:"+duration+"ms");            
            rec.close();//释放录音资源
            //已经拿到blob文件对象想干嘛就干嘛:立即播放、上传      
            /*立即播放例子*/
            var audio=document.createElement("audio");
            audio.controls=true;
            document.body.appendChild(audio); 
            audio.src=URL.createObjectURL(blob);            
            audio.play();            
        },function(msg){         
            console.log("录音失败:"+msg);
        });
    },3000);
},function(msg,isUserNotAllow){//用户拒绝未授权或不支持
    console.log((isUserNotAllow?"UserNotAllow,":"")+"无法录音:"+msg);
});

recorder.mp3.min.js下载


GitHub地址:github.com/xiangyuecn/Recorder

Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。