微信小程序录音界面以及功能实现

pick一下最终效果，然后一步一步来。
先把界面效果做出来。

功能：

1. 长按会随动画出现边上半透明的圈，松开会缩回去。
2. 顶部progressBar长按时出现，然后随录音时长变短。

这是界面功能，我们先搞一下。

wxml

<view class="head">
  <progress strokeWidth="4" percent="{{value}}" wx:if="{{showPg}}" ></progress>
  <view class="dot {{isTouchStart==true?'dot-blowup':''}} {{isTouchEnd==true?'dot-zoomout':''}}" style="display:{{isDot}}"></view>
  <view class="record" bindtouchstart="recordStart" bindtouchend="recordTerm">
    <image mode="widthFix" src="../../images/record.png"></image>
  </view>
</view>

wxss

.head {
  width: 100%;
  height: 400rpx;
  position: relative;
  
}
.head ,page{
  background-color: #f7f7f7;
}
.record, .dot {
  height: 200rpx;
  width: 200rpx;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-iteration-count: 1;
}

.record {
  background: rgba(92, 212, 76);
  z-index: 10;
}

.dot {
  background: rgba(92, 212, 76, 0.7);
  z-index: 9;
}

.dot-blowup {
  animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-fill-mode: forwards;
}

.dot-zoomout {
  animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-fill-mode: forwards;
}

@keyframes sploosh2 {
  0% {
    box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
    background: rgba(92, 212, 76, 0.7);
  }

  100% {
    box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
    background: rgba(92, 212, 76, 0.3);
  }
}

@keyframes sploosh3 {
  0% {
     box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
    background: rgba(92, 212, 76, 0.3);
  }

  100%{
    box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
    background: rgba(92, 212, 76, 0.7);
  }
}

.record image {
  height: 90rpx;
  width: 90rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  background: transparent;
  transform: translate(-50%, -50%);
}

js赋值

var app = getApp(),
  rm = wx.getRecorderManager();
  //录音停止时调用
rm.onStop(function(e) {
    var a = this;
    wx.showLoading({
      title: "正在识别..."
    });
  
    //上传逻辑
    var n = {
      url: app.globalData.url + "upload",
      filePath: e.tempFilePath,
      name: "music",
      header: {
        "Content-Type": "application/json"
      },
      success: function (res) {
        
       }
      };
      wx.uploadFile(n);
  }),
  Page({

    /**
     * 页面的初始数据
     */
    data: {
      hasRecord: false,
      isDot: "block",
      isTouchStart: false,
      isTouchEnd: false,
      value: '100',
      touchStart:0,
      touchEnd:0,
      vd:''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
      var a = this;
      wx.authorize({
        scope: "scope.record",
        success: function() {
          console.log("录音授权成功");
        },
        fail: function() {
          console.log("录音授权失败");
        }
      }), a.onShow()

    },
    // 点击录音按钮
    onRecordClick: function () {
      wx.getSetting({
        success: function (t) {
          console.log(t.authSetting), t.authSetting["scope.record"] ? console.log("已授权录音") : (console.log("未授权录音"),
            wx.openSetting({
              success: function (t) {
                console.log(t.authSetting);
              }
            }));
        }
      });
    },
    /**
     * 长按录音开始
     */
    recordStart: function(e) {
      var n = this;
      rm.start({
        format: "mp3",
        sampleRate: 32e3,
        encodeBitRate: 192e3
      }), n.setData({
        touchStart: e.timeStamp,
        isTouchStart: true,
        isTouchEnd: false,
        showPg: true,
      })
      var a = 15, o = 10;
      this.timer = setInterval(function () {
        n.setData({
          value: n.data.value - 100 / 1500
        }), (o += 10) >= 1e3 && o % 1e3 == 0 && (a-- , console.log(a), a <= 0 && (rm.stop(),
          clearInterval(n.timer), n.animation2.scale(1, 1).step(), n.setData({
            animationData: n.animation2.export(),
          showPg: false,
          })));
      }, 10);
    },
    /**
     * 长按录音结束
     */
    recordTerm: function(e) {
      rm.stop(), this.setData({
        isTouchEnd: true,
        isTouchStart: false,
        touchEnd: e.timeStamp,
        showPg: false,
        value: 100
      }), clearInterval(this.timer);
    }
  })

这里我的录音按钮点击扩散效果用的是纯css实现，而上方progress是使用animation实现的。