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


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 相关文章推荐
js获取当月最后一天实例代码
Nov 19 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
浅谈PHP中的
2016/04/23 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Python常用模块介绍
2014/11/21 Python
详解在Python中处理异常的教程
2015/05/24 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python实现进程同步和通信的方法
2018/01/02 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
keras 多gpu并行运行案例
2020/06/10 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
汉语言文学毕业求职信
2014/07/17 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
MongoDB支持的索引类型
2022/04/11 MongoDB
Redis实现分布式锁的五种方法详解
2022/06/14 Redis
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android