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


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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
window.location.hash 使用说明
Nov 08 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
javascript 获取图片颜色
2009/04/05 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
Python反转序列的方法实例分析
2018/03/21 Python
python中reader的next用法
2018/07/24 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
用python爬取租房网站信息的代码
2018/12/14 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python解析xml简单示例
2019/06/21 Python
python如何基于redis实现ip代理池
2020/01/17 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
预备党员党课思想汇报
2014/01/13 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
社会公德演讲稿
2014/05/20 职场文书
狮子林导游词
2015/02/03 职场文书
实习班主任自我评价
2015/03/11 职场文书
个人收入证明范本
2015/06/12 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python