小程序实现按下录音松开识别语音


Posted in Javascript onNovember 22, 2019

本文实例为大家分享了小程序按下录音松开识别语音的具体代码,供大家参考,具体内容如下

wxml

<view class='circle position-absol'>
    <text wx:if="{{!anmationShow}}" class='fz-12 fot-col block'>按住话筒说话,松开后自动识别文字</text>
    <text wx:if="{{anmationShow}}" class='fz-12 fot-col block'>松手为您匹配设计公司</text>
    <image bindtouchstart='startHandel' bindtouchend='endHandle' mode="widthFix" src="https://www.baidu.com/img/baidu_jgylogo3.gif" class='imgwh'></image>
    <view class='c2' wx:if="{{anmationShow}}"></view>
    <view class='c3' wx:if="{{anmationShow}}"></view>
</view>

wxss

.position-absol{
 width: 100%;
 text-align: center;
 position: absolute;
 bottom: 80rpx;
}
.imgwh{
 width:110rpx;
 height:110rpx;
}
.block{
 display:block;
}
/* 波浪动画 */
 .circle view {
   position:absolute;
   top:50%;
   left:50%;
   background:#FF5A5F;
   width:100px;
   height:100px;
   margin-left:-50px;
   margin-top:-25px;
   opacity:0;
   border-radius:90px;
   animation: 0.8s linear infinite;
   -webkit-animation: 0.8s linear infinite;
 }
 .circle view.c2 {
   -webkit-animation-name:c2;
   -webkit-animation-delay:.6s;
   -ms-animation-name:c2;
   -ms-animation-delay:.6s;
   -moz-animation-name:c2;
   -moz-animation-delay:.6s;
   -o-animation-name:c2;
   -o-animation-delay:.6s;
   animation-name:c2; 
   animation-delay:.6s; 
 }
 .circle view.c3 {
   -webkit-animation-name:c2;
   -webkit-animation-delay:1s;
   -ms-animation-name:c2;
   -ms-animation-delay:1s;
   -moz-animation-name:c2;
   -moz-animation-delay:1s;
   -o-animation-name:c2;
   -o-animation-delay:1s;
   animation-name:c2; 
   animation-delay:1s;
 }
 @-webkit-keyframes c2 {
   0% {
     -webkit-transform:scale(.622);
     -ms-transform:scale(.622);
     -moz-transform:scale(.622);
     -o-transform:scale(.622);
     transform:scale(.622);
     opacity:0
   }
   50% {
     -webkit-transform:scale(.822);
     -ms-transform:scale(.822);
     -moz-transform:scale(.822);
     -o-transform:scale(.822);
     transform:scale(.822);
     opacity:.4
   }
   98% {
     -webkit-transform:scale(1);
     -ms-transform:scale(1);
     -moz-transform:scale(1);
     -o-transform:scale(1);
     transform:scale(1);
     opacity:.2
   }
   100% {
     opacity:0
   }
 }
 @keyframes c2 {
   0% {
     -webkit-transform:scale(.622);
     -ms-transform:scale(.622);
     -moz-transform:scale(.622);
     -o-transform:scale(.622);
     transform:scale(.622);
     opacity:0
   }
   50% {
     -webkit-transform:scale(.822);
     -ms-transform:scale(.822);
     -moz-transform:scale(.822);
     -o-transform:scale(.822);
     transform:scale(.822);
     opacity:.4
   }
   98% {
     -webkit-transform:scale(1);
     -ms-transform:scale(1);
     -moz-transform:scale(1);
     -o-transform:scale(1);
     transform:scale(1);
     opacity:.2
   }
   100% {
     opacity:0
   }
 }

js

data:{
 anmationShow: false
}
 //按住按钮
 startHandel: function () {
  this.setData({
   sayimg: '/assets/image/demand/down.png',
   anmationShow: true,
  })
  console.log("开始")
  wx.getRecorderManager().start({
   duration: 10000
  })
  const self = this
  setTimeout(function () { 
   self.setData({
    sayimg: '/assets/image/demand/sea.png',
    anmationShow: false
   }) 
  }, 10000);
 },
 //松开按钮
 endHandle: function () {
  // clearTimeout()
  this.setData({
   sayimg: '/assets/image/demand/sea.png',//图片样式
   anmationShow: false,
  })
  console.log("结束")
  const recorderManager = wx.getRecorderManager()
  //录音停止函数
  var that = this;  
  wx.getRecorderManager().onStop((res) => {
   if (!this.data.inpvalue) {
    wx.showLoading({
     title: '语音识别中'
    })
   } 
   const { tempFilePath } = res; //这里松开按钮 会返回录音本地路径
   //上传录制的音频到服务器
   wx.uploadFile({
    url: '接口地址' + api.voice, //接口地址
    name: 'file', //上传文件名
    filePath: tempFilePath,
    success: function (res) { //后台返回给前端识别后的文字
     var model = res.data
     var modeljson = JSON.parse(model)
     if (modeljson.status_code == 500) {
      wx.showToast({
       title: '语音转换失败',
       image: '/assets/image/icon/fail@2x.png'
      })
      return false;
     }
     if (modeljson.meta.status_code === 200 && !modeljson.data.err_msg) {
      var saymessage = modeljson.data.message;
      wx.setStorageSync('sayinfo', saymessage)
      that.setData({
       inpvalue: saymessage
      })
      setTimeout(() =>{
       wx.navigateTo({
        url: '../loding/loding'
       })
       
      },2000)
      setTimeout(() => {
       wx.hideLoading();
      }, 100)
     } else if (modeljson.data.err_msg) {
      wx.showToast({
       title: '请大声说话',
       image: '/assets/image/icon/fail@2x.png'
      })
      return false;
     }
    }
   })
  })
  //触发录音停止
  wx.getRecorderManager().stop()
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
小程序采集录音并上传到后台
Nov 22 #Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 #Javascript
小程序实现录音上传功能
Nov 22 #Javascript
vue使用recorder.js实现录音功能
Nov 22 #Javascript
微信小程序开发摇一摇功能
Nov 22 #Javascript
js实现录音上传功能
Nov 22 #Javascript
解决vue自定义全局消息框组件问题
Nov 22 #Javascript
You might like
php获得文件扩展名三法
2006/11/25 PHP
php设计模式小结
2013/02/15 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
python监控进程脚本
2018/04/12 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
哪些是python中web开发框架
2020/06/17 Python
Python实现自动签到脚本功能
2020/08/20 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
总经理职责范文
2013/11/08 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
项目副经理岗位职责
2013/12/30 职场文书
讲座主持词
2014/03/20 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
房屋所有权证明
2014/10/20 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL