【jquery】jquery使用Recorder.js实现录音并上传,调用阿里云接口语音转文字

阿里一句话识别语音数据时长不能超过60s。参考文档
实现功能:
1.点击拾音按钮开始录音,点击结束按钮结束录音并调取后台语音转文字接口
2.录音时长超过60s自动结束录音并调取后台语音转文字接口

<!-- 引用recorder插件 -->
<script type="text/javascript" src="recorder.mp3.min.js"></script>

<button id="rec-start-btn" onclick="recStart()" >开始录音</button>
<button id="stop-recorder"  onclick="recStop()">结束录音</button>
<textarea name=like cols="30" rows="10"  id="ai-input" placeholder="语音转文字结果"></textarea>

    <script type="text/javascript">
        var timer = 0;//录音计时器
        var rec=Recorder({ 
            type:"mp3",
            sampleRate:16000,
            bitRate:16
        });
         //开启录音
         rec.open(function(){
             //success
         },function(msg){
             alert("开启录音失败:"+msg)
             console.log("开启录音失败:"+msg);
         })


        /**开始录音**/
        function recStart(){
            rec.start();
            $("#timer").text("0s");
            startTimer();
        };

        /**结束录音**/
        function recStop(){
            stopTimer();
            
            rec.stop(function(blob,duration){
                var localUrl=(window.URL||webkitURL).createObjectURL(blob);
                console.log(blob,localUrl,"时长:"+duration+"ms");
                var form = new FormData();
                form.append("voice_file", blob, "<voice_file>");
				//结束录音成功,得到blob文件,使用FormData用multipart/form-data表单上传文件
                var settings = {
                    "url": "这里是后台接口",
                    "method": "POST",
                    "timeout": 0,
                    "processData": false,
                    "mimeType": "multipart/form-data",
                    "contentType": false,
                    "data": form
                };
                $.ajax(settings).done(function (response) {
                    var res = JSON.parse(response)
                    if(res.code == 200){
                        let text = "";//阿里智能语音识别的文字结果;
                        let textArr = res.result.Result.Sentences;
                        textArr.forEach(item => {
                            text+=item.Text
                        });
                        $("#ai-input").val(text);
                    }else{
                        console.log(res.result)
                    }
                });

            },function(msg){
                console.log("录音失败:"+msg);
                //可以通过stop方法的第3个参数来自动调用close
                rec.close();
                // rec=null;
            });
        };
        
        //计时器
        var interval = null;
        function startTimer(){
            // 初始化时间变量
            var seconds = 0;
            // 设置计时器间隔为1秒
            interval = setInterval(function() {
                // 每秒增加
                seconds++;              
                // 更新计时器显示元素的内容
                $("#timer").text(seconds+"s");
                if(seconds > 59){
                    //超过60s,结束录音。
                    stopTimer();
                    recStop();
                }
            }, 1000); // 1000毫秒等于1秒
        }
    </script>
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值