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

本文主要是介绍【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个参数来自动调用closerec.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>