手机端 H5 语音识别转化为文字 demo

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"); //获取ID
var 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('http://www.w3.org/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="20190603095446"></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是一个识别语音的插件文件,需要下载引入;

手机端 H5 语音识别转化为文字 demo相关推荐

pc网站和手机端h5网站开发接入微信支付
有关支付类开发,现在比以前要简单很多了,微信和支付宝两大支付巨头早已经给出了非常详细的接入文档,并且迭代了好多版本,但在实际开发中其实文档的可读性还是有些磕磕绊绊的,而且也有一些坑需要注意.以微信支付 ...
手机端H5开发，屏幕不同尺寸适配方法（屏幕自适应）
最近在接触手机端H5开发,然后设计师将设计图发给我们进行开发,对于第一次接触详细设计图开发的我来说,觉得很新颖毕竟一直没有接触这么正规的设计图(字体样式,颜色,大小等等),之后再开发的时候,就遇到了一 ...
h5适配华为手机_手机端H5页面适配踩坑
这两天在公司做手机端H5页面,第一次开发没什么经验,对rem, pt, ppi, dpr这些概念完全不懂,看了很多博客,现总结如下. 对于不同像素宽度的手机,如何做到每一个元素自动缩放? rem: f ...
用python3实现简单的语音识别转化成文字
自己对python感兴趣,利用业余时间弄了个自动回复微信消息的小机器人,纯属自己瞎玩,给大家介绍一下,有想自己弄着玩的可以做个参考,项目地址:https://github.com/shiyusong3 ...
从手机端 H5 制作来看 WEB 动画的术与道
我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式.企业商户对于这种方式也很有好感,从而导致了 H5 ...
JS实现视频试看提示付费功能手机端 H5网页
手机端网页 JS实现视频试看功能,到时间自动停止播放 H5 场景:视频播放对未付费的用户只播放两分钟付费的用户可正常播放思路:监听视频播放时间,到达预定时间的时候, 暂停视频播放, 同时关闭大 ...
h5可拖动悬浮按钮_手机端H5悬浮按钮怎么实现的呢？
最近公司项目需要在H5页面上悬浮一个按钮,同时要求按钮是可以拖动的并且需要可以自动贴边,无奈前端小伙伴不怎么给力,无奈只能我顶上了.我觉得这种情况应该可以抽出一个组件,这次就仔细探讨一下悬浮按钮的实现 ...
chrome浏览器调试手机端h5页面
这个是常识性的问题了.奈何我之前确实是不知道.只知道用F12来调试PC端的页面,这次经过同事指点,终于知道为啥人家在浏览器调试手机端页面,显示的大小都是手机端的. 步骤: 1.打开F12 2.如果所示 ...
手机端h5唤起苹果地图
最近做一个项目分为pc和手机两个端,手机端需要调用第三方地图,可以选择高德地图和苹果地图,唤起高德地图的方法官网就有,网上一搜也是一大堆.这个不用多说,但唤起苹果地图的方法寥寥无几,几乎搜索不到,找了 ...
手机端H5页面时间插件
插件最终版图: 1.引入css和js样式': <link rel="stylesheet" type="text/css" href="../m ...

手机端 H5 语音识别转化为文字 demo

手机端 H5 语音识别转化为文字 demo相关推荐

最新文章

热门文章