html部分 index.html :
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>demo</title><meta id="viewport" name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><link rel="stylesheet" href="./voice.css"><link rel="stylesheet" href="./mui/css/mui.min.css"></head><body><div><div class="messages"><div class="waitting" style='display:none'><i class="mui-icon mui-icon-mic"></i><span>语音识别中...</span></div></div><audio controls autoplay style='display:none'></audio><div class="contrs"><div class="btn"><input type="button" name="" id="messageBtn" value="按住 说话" onclick="startRecording()"></div></div><div class="error"></div><!-- 模板引擎渲染 --><script type="text/html" id="infoShow"><div class='speaken'>{{message==="识别成功" ? text : message}}</div> </script></div><script src="jquery-3.2.1.min.js"></script><script src="./node_modules/js-audio-recorder/dist/recorder.js"></script><script src="main.js"></script><script src="./mui/js/mui.js"></script><script src="./template-web.js"></script></body></html>
js部分 main.js:
var btnElem = document.getElementById("messageBtn"); //获取IDvar posStart = 0; //初始化起点坐标var posEnd = 0; //初始化终点坐标var posMove = 0; //初始化滑动坐标var audio = document.querySelector('audio');var recorder; var showError;var save_link;var saveFile='record.pcm';var u = navigator.userAgent, app = navigator.appVersion;var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if(!isIOS){navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia;if(!navigator.getUserMedia){alert( "不支持录音");}navigator.getUserMedia({audio:true}, function onSuccess(stream) {recorder=new Recorder({sampleBits: 16,// 采样位数，范围8或16sampleRate: 16000, // 采样率，范围11025、16000、22050、24000、44100、48000numChannels: 1,// 声道，范围1或2});}, function onError(error) {alert( "无法获取录音权限");});}else{recorder=new Recorder({sampleBits: 16,// 采样位数，范围8或16sampleRate: 16000, // 采样率，范围11025、16000、22050、24000、44100、48000numChannels: 1,// 声道，范围1或2});}function initEvent() {btnElem.addEventListener("touchstart", function (e) {e.preventDefault(); //阻止浏览器默认行为$('.waitting').css("display","block");posStart = 0;posStart = e.touches[0].pageY; //获取起点坐标btnElem.value = '松开 结束';//console.log(posStart + '-------开始坐标');// 开始录音 if(recorder){recorder.start({savePath:saveFile,format:'pcm'});console.log("start");return;} });btnElem.addEventListener("touchmove", function (e) {e.preventDefault(); //阻止浏览器默认行为posMove = 0;posMove = e.targetTouches[0].pageY; //获取滑动实时坐标if (posStart - posMove < 500) {btnElem.value = '松开 结束';} else {btnElem.value = '松开手指，取消发送';}});btnElem.addEventListener("touchend", function (e) {e.preventDefault();$('.waitting').css("display","none");btnElem.value = '按住 说话';console.log("End");recorder.stop(); //松开发送录音//点击发送音频var msgId=1;if(recorder.duration==0){alert("请先录音");return;}// -------------转base64--------------let a = new FileReader();a.onload = function (e) { var base=e.target.result;var list = {"secret":{"appId":"1234","token":"3741049b355fa6e15ac753e9e952afea"},"sound":base.substring(base.indexOf(',')+1,base.length)}// 转化录音文件$.ajax({type: 'post',//url: 'http://212.64.88.43:80/speechPay/speechreco',url: 'https://192.168.43.105:8443/speechreco',contentType: "text/plain",dataType: 'json',data:encodeURIComponent(JSON.stringify(list)),success: function( info ) {var htmlStr = template('infoShow', info);$('.messages').html( htmlStr );//recorder.downloadWAV(); recorder.clear();}})}a.readAsDataURL(recorder.getPCMBlob());});};// 点击播放录音$(document).on("click",".voiceItem",function(){var id=$(this)[0].id;var data=msg[id];console.log(data.blob); playRecord(data.blob);function playRecord(blob){ recorder.play(audio,blob); }; var record = recorder.getBlob(); // 调用了downloadRecord函数 下载音频；downloadRecord(record.blob);console.log(record.blob);})// 点击发送 把录音转换为一个a链接// function downloadRecord(record){//var href;////创建一个元素指定命名空间URI// var save_link = document.createElementNS('/1999/xhtml', 'a')// save_link.href = URL.createObjectURL(record); // console.log(save_link.href);// // save_link.src=URL.createObjectURL(record)// var now=new Date;// save_link.download = now.Format("yyyyMMddhhmmss");// fake_click(save_link);// console.log(save_link); // //save_link 打印了一个a路径链接 // //<a href="blob:null/b892b430-54eb-462a-8689-05d4eb1b9a2a" download="0603095446"></a>// return;//}// function fake_click(obj) {// var ev = document.createEvent('MouseEvents');// ev.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);// obj.dispatchEvent(ev);// }// function getStr(){// var now=new Date;// var str= now.toDateString();// console.log(str);// }// function stopRecord(){ //recorder&&recorder.stop(); // }; // var msg={};initEvent();
css部分 voice.css :
* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.contaioner {width: 100%;height: 100%;position: relative;}.messages{height:600px;margin-bottom: 10px;border: 1px solid gainsboro;position: relative;}.messages .waitting {width: 180px;height: 180px;background-color: rgb(209, 201, 201);margin:150px auto;border-radius: 8px;}.messages .waitting .mui-icon-mic {padding-top: 30px;display: block;font-size: 80px;margin:30px auto;text-align: center;}.messages .waitting span {display: block;text-align: center;font-size: 20px;}.warper{clear: both;margin: 10px;display: block;min-height: 32px;}audio{display: none;}.start .mui-icon-mic {display: block;font-size: 50px;text-align: center;position: absolute;left: 50%;transform: translateX(-50%);} .speaken {width: 100%;line-height: 40px;margin:20px 0px;font-size: 20px;position: absolute;top:39%;left: 50%;transform: translateX(-50%);text-align: center;color:red;}.send_btn {width: 100%;height: 70px;position: relative;}.send_btn button {height: 30px;background-color: #ccc;margin:0 auto;border: 1px solid #000;top:0;left: 50%;transform: translateX(-50%);}.btn {position: fixed;bottom: 0;width: 100%;height: 70px;background: rgb(147, 192, 245);}.btn input {width: 100%;height: 100%;font: 50px/150px 'microsoft yahei';}#messageBtn {font-size: 20px;background-color: #ccc;}
注意:recorder.js是一个识别语音的插件文件,需要下载引入;
