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

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

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