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.
            

              

                点击这里免费试用，快速创建您的专属小程序
              
              

                标签：
                微信小程序
                小程序
                小程序是什么
              
            
            
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。