微信小程序录音与播放录音功能实现

微信小程序录音与播放录音功能实现，话不多说直接上代码实例：

test.wxml

<button bindtap='start'>开始录音</button>  
<button bindtap='play'>播放录音</button>  
<button bindtap='stop'>停止录音</button>

test.js

var voice = "";
Page({
  play: function () {
    //播放声音文件  
    wx.playVoice({
      filePath: voice
    })
  },
  start: function () {
    //开始录音  
    wx.startRecord({
      success: function (e) {
        voice = e.tempFilePath
      }
    })
  },
  stop: function () {
    //结束录音  
    wx.stopRecord();
  }
})

微信小程序录音与播放录音功能前端界面：

微信小程序录音与播放录音功能实现

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实现的。

参考自：必学智库

在开发微信小程序遇到资源类无法显示的问题：找了很多资料，特记录备用。

1. 真机测试不能显示图片问题

原因：微信小程序的图片资源必须是base64和网络图片格式。
解决方案：js中，对本地图片进行转码，或者直接将url换为image根目录。

参考资料：http//:wangzhan.jiaxiangz.com