微信小程序录音与播放录音功能实现,话不多说直接上代码实例:
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一下最终效果,然后一步一步来。先把界面效果做出来。
微信小程序录音与播放录音功能:
- 长按会随动画出现边上半透明的圈,松开会缩回去。
- 顶部progressBar长按时出现,然后随录音时长变短。
这是界面功能,我们先搞一下。
wxml:
<view class="head