微信小程序实现语音识别

解决思路：利用小程序的录音功能，将录音文件传送到服务器，服务器调用语音识别api，然后将识别的文字返回给微信小程序。

前端引用：微信小程序音频录制---波纹循环动画_weixin_43947294的博客-CSDN博客

小程序前端框架：https://github.com/TalkingData/iview-weapp

1.小程序wxml:

<view class="myRecode">
  <!-- <view class="recode microphone-view" bindtouchstart='recodeClick' bindtouchend='recodeEnd'> -->
    <view class="recode microphone-view" capture-bind:longpress="micLongpress" capture-bind:touchend="micEnd">
        <i class="fa fa-microphone"></i>
        <view class="ripple"></view>
        <view class="ripple" animation="{{animationData1}}"></view>
        <view class="ripple" animation="{{animationData2}}"></view>
  </view>
  <view>{{timeText}}</view>
</view>

2.wxss

.microphone-view{
    position: relative;
    /* border: 1px solid black; */
    width: 11vw;
    height: 11vw;
    border-radius: 11vw;
    background-color: burlywood;
    text-align: center;
    line-height: 11vw;
}
.microphone-view>i{
    color: #ffffff;
    /* position: absolute;
    top: 50%;
    left:50%;
    transform: translateY(-50%); */
}

/* pages/myRecode/myRecode.wxss */
.myRecode{
    padding-top:500rpx;
    text-align: center;
    box-sizing: border-box;
  }
  .myRecode .recode{
    display: inline-block;
    width:200rpx;
    height:200rpx;
    background: #EBB128;
    border-radius: 50%;
    text-align: center;
    color:#fff;
    line-height: 200rpx;
    position: relative;
  }
  .ripple{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius: 50%;
    border:2px solid #F6F1CC;
  }
  

3.小程序的js

const { $Toast } = require('../../dist/base/index');//引入模板
Page({
    data: {
        timeText:'按住讲话'
    },
   
    //长按事件
    micLongpress:function(){
        let that=this;
        console.log('长按');
        //手机震动
        wx.vibrateShort({
            type: 'medium',
            style:'medium',
            fail:()=>{}
        });
        //判断是否有录音授权
        wx.getSetting({
          success(res){
              console.log('获取到的权限',res.authSetting);
              if(!res.authSetting['scope.record']){
                  console.log('wu录音权限');
                  //申请授权
                  wx.authorize({
                    scope: 'scope.record',
                    success() {
                      console.log('同意授权');
                    },
                    fail(){
                        console.log('未同意录音授权');
                        //弹出警告框
                        $Toast({
                            content: '请先授权录音',
                            type: 'warning'
                        });
                    }
                  })
              }else{
                console.log('有录音授权');
                //开始录音
                console.log('开始录音');
                var recorderManager = wx.getRecorderManager();
                const options = {
                  duration:10000,
                  sampleRate: 48000,
                  numberOfChannels: 1,
                  encodeBitRate: 96000,
                  format: 'wav',
                  frameSize: 50,
                  
                }
                recorderManager.start(options);

                recorderManager.onStart(() => {
                  console.log('recorder start')
                });
                recorderManager.onError((res) => {
                  console.log(res);
                });
                recorderManager.onStop((res) => {
                    console.log(res);
                    //动画结束
                    that.recodeEnd();
                      var tempFilePath = res.tempFilePath; // 文件临时路径
                var temp = tempFilePath.replace('.mp3', '') //转换格式 默认silk后缀
                wx.showLoading({
                    title: '发送中...',
                });
                wx.uploadFile({
                    url: 'http://www.recyle/api/record', //上传服务器的地址
                    filePath: tempFilePath, //临时路径
                    name: 'file',
                    header: {
                        contentType: "multipart/form-data", //按需求增加
                    },
                    success: function (res) {
                        wx.hideLoading();
                        console.log(res)
                    },
                    fail:function(err){
                        wx.hideLoading();
                        console.log(err.errMsg);//上传失败
                    }
                });
                    // wx.request({
                    //   url: 'http://www.recyle/record',
                    //   data: {
                    //     src:res.tempFilePath
                    //   },
                    //   success (res) {
                    //     console.log(res)
                    //   }
                    // })
                  //   //   自动播放开始
                  //   const innerAudioContext = wx.createInnerAudioContext()
                  //   innerAudioContext.autoplay = true
                  //   innerAudioContext.src = res.tempFilePath
                  //   innerAudioContext.onPlay(() => {
                  //     console.log('开始播放')
                  //   })
                  //   innerAudioContext.onError((res) => {
                  //     console.log(res.errMsg)
                  //     console.log(res.errCode)
                  //   })
                  //   //自动播放结束
                  });

                //动画开始
                that.recodeClick();
                // //10秒以后结束录音
                // setTimeout(function(){
                //     that.micEnd();
                // },10000)
            }
          }
        })
    },
    
    //结束长按
    micEnd:function(){
        console.log('结束长按');
        var recorderManager = wx.getRecorderManager(); //获取全局唯一的录音管理器
        recorderManager.stop();//结束录音
    },
     //录音动画函数开始
  animationFun:function(animationData){
    if(!this.data.animationStatus){
      return 
    }
    var animation = wx.createAnimation({
      duration: 1000
    })
    animation.opacity(0).scale(2, 2).step(); 
    this.setData({
      [`${animationData}`]: animation.export()
    })
  },
  animationEnd: function (animationData) {
    var animation = wx.createAnimation({
      duration: 0
    })
    animation.opacity(1).scale(1, 1).step(); 
    this.setData({
      [`${animationData}`]: animation.export()
    })
  },
  recodeEnd: function() {
    //动画1结束
    var animation1 = wx.createAnimation({
      duration: 0
    })
    animation1.opacity(1).scale(1, 1).step(); 
    //动画2结束
    var animation2 = wx.createAnimation({
      duration: 0
    })
    animation2.opacity(1).scale(1, 1).step(); 
    this.setData({
      animationData1: animation1.export(),
      animationData2: animation2.export(),
      animationStatus: false
    })
  },
  recodeClick: function() {
    this.setData({
      animationStatus: true
    })
    this.animationFun('animationData1')
    setTimeout(()=>{
      this.animationFun('animationData2')
    },500)
    setTimeout(() => {
      this.animationRest()
    }, 1000)
  },
  animationRest: function() {
    //动画重置
    this.animationEnd('animationData1')
    setTimeout(()=>{
      this.animationEnd('animationData2')
    },500)
    setTimeout(() => {
      if (this.data.animationStatus) {
        this.recodeClick()
      }
    }, 100)

  },
  //录音动画函数结束

  });