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

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

2024-09-09 00:09:53 前端知识 前端哥 418 917 我要收藏

阿里一句话识别语音数据时长不能超过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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17944.html
标签
阿里云
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!