html5移动端调用语音功能
来源:互联网 发布:人工智能的智能含义 编辑:程序博客网 时间:2024/05/22 01:50
<form class="container js-ajax-form" role="form" method="post" id="msg_form" onsubmit="return false;"> <input type="hidden" name="doctor_id" value="1" /> <div class="fill-text"> <dl> <dt>详细病情<span>(支持语音输入识别)</span></dt> <dd> <textarea name="msg" id="msg" placeholder="请输入详细病情,语音输入仅支持一次性输入,再次输入将覆盖之前内容。"></textarea> <div class="tape"> <span class="hear" id="hear" onclick="play()" ><input readonly type="hidden" name="localId"><b></b>'s<i></i></span> <span class="say" id="talk_btn"></span> </div> </dd> </dl> </div> <div class="fill-button"><input type="submit" id="submit" value="发送留言"/></div></form><!-- 语音识别 start --><div class="sound-recording"> <dl> <dt><i></i></dt> <dd> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </dd> </dl> <p>2秒内找到合适医生</p></div><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
wx.ready(function(){});var START = null; //开始时间var END = null; //最后时间var timeout = undefined; //定时器 var state = 0; //状态function showRecording() { $(".sound-recording").show();//显示录音 //span的width随机变化 setInterval(function (){ $(".sound-recording dd span").each(function (){ $(this).width(48*Math.random() + 'px'); }); },200) clearTimeout(timeout); state = 0; timeout = setTimeout(function() { state = 1; }, 1000);}function stopRecording() { $(".sound-recording").hide();//关闭录音 clearTimeout(timeout); state = 0; }$("#talk_btn").on("touchstart", function (event) { event.preventDefault(); START = new Date().getTime(); wx.startRecord({ success: function(){ recordTimer = setTimeout(function(){ var longTime = new Date().getTime(); if(longTime - START > 100){ showRecording(); } wx.startRecord({ success: function(){ localStorage.rainAllowRecord = 'true'; } }); },300); }, cancel: function () { stopRecording(); alert('用户拒绝授权录音'); } });});//取消触摸$('#talk_btn').on('touchcancel', function(event){ stopRecording(); wx.stopRecord({ success: function (res) { clearTimeout(recordTimer); }, fail: function (res) { } });}) $("#talk_btn").on("touchend", function (event) { stopRecording(); event.preventDefault(); END = new Date().getTime(); wx.stopRecord({ success: function (res) { if((END - START) < 300){ END = 0; START = 0; //小于300ms,不录音 clearTimeout(recordTimer); return; }else{ $("#hear").css("display","inline-block"); } // play(res.localId); translateVoice(res.localId); var timeLength = ((END-START)/1000).toFixed(1); //时间差 $("#hear input").val(res.localId); $("#hear b").text(timeLength); }, fail: function (res) { alert(JSON.stringify(res)); } });}); //播放语音function play() { var localId = $("#hear input").val(); $(".hear").addClass("cur"); wx.playVoice({ localId: localId }) //语音播放结束的回调 wx.onVoicePlayEnd({ success: function (res) { $(".hear").removeClass("cur"); //var localId = res.localId; // 返回音频的本地ID } });}function translateVoice(localId) { wx.translateVoice({ localId: localId, // 需要识别的音频的本地Id,由录音相关接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { $('textarea[name=msg]').val(res.translateResult); // 语音识别的结果 } });}function uploadVoice() { var serverId = ''; var localId = $("#hear input").val(); if (localId != '') { wx.uploadVoice({ localId: localId, // 需要上传的音频的本地ID,由stopRecord接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { serverId = res.serverId; // 返回音频的服务器端ID } }); } return serverId;}$("#hear i").on("click", function (){ $("#hear input").val(''); $(this).parent().hide();})
0 0
- html5移动端调用语音功能
- html5的语音输入功能
- html调用移动端系统功能
- HTML5录音并调用百度语音识别
- HTML5判断移动端横屏竖屏功能
- HTML5:在移动端禁用长按选中文本功能
- [转]HTML5语音输入功能x-webkit-speech
- 浏览器上的HTML5语音识别功能实例页面
- html5为输入框添加语音输入功能
- HTML5中x-webkit-speech语音输入功能
- 移动端调用拨打电话发送短信等功能
- 移动端js+html5
- html5移动端开发
- HTML5移动端优化
- html5移动端日历
- 移动端语音播放以及语音条拖动的实现
- 语音功能
- html5页面调用手机打电话功能
- ES6 解构赋值
- 关于在线程中使用AfxGetMainWnd()出错的问题,终于找到了
- Java Socket编程
- 成功在mini2440上移植ffmpeg
- vue常用过滤器
- html5移动端调用语音功能
- 深入解析linux下rtc架构
- PHP 扩展开发 : 编写一个hello world !
- 'mvc:annotation-driven' must have no character or element问题
- OpenSSL编译方法
- linux系统下安装jdk
- 最大子矩阵求和
- Quartz 2D
- c语言结构体内存对齐