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


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函数搞定网页标题(title)闪动效果
May 13 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
详解Node全局变量global模块
Sep 28 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
vue之将echart封装为组件
Jun 02 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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
模仿OSO的论坛(五)
2006/10/09 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
接收键盘指令的脚本
2006/06/26 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python字符串格式化输出代码实例
2019/11/22 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
什么是会话Bean
2015/05/14 面试题
毕业生文员求职信
2013/11/03 职场文书
项目开发计划书
2014/01/09 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
社区平安建设方案
2014/05/25 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
小学校长汇报材料
2014/08/20 职场文书
协会周年庆活动方案
2014/08/26 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
Elasticsearch 聚合查询和排序
2022/04/19 Python