微信小程序仿微信语音 - 好文

搞了这么长时间，第一次写文章。给大家分享个技术难度不高的，主要展示录音功能。

先看一下效果

就是这样，点击底部按钮会产生变化，根据bind:touchstart在触摸时触发开始录音事件,根据bind:touchend会在你结束触摸的时候调用录音结束事件，产生一个临时url。并且根据触摸的时间可以将播放条长度动态调整，录音时间长它的长度就长一点，短了它的宽度就会短一点。下面贴上代码。
// pages/Record/Record.js Page({ /** * 页面的初始数据 */ data: {
luStatu:false,//di'bu list:[], width:0 }, // 触摸开始 touchStart:function(e){ //
console.log('touchStart', e); var start=e.timeStamp; var seconds = (start %
(1000 * 60)) / 1000; this.setData({ start: seconds, luStatu:true, })
this.recorderManager.start({ format: 'mp3' }); }, // 触摸结束 touchEnd:function (e)
{ // console.log('touchEnd', e); var start = this.data.start; var end =
e.timeStamp; var seconds = (end % (1000 * 60)) / 1000; var shijian = seconds -
start; var width = shijian*4; this.setData({ end: seconds, shijian: shijian,
luStatu: false, width: width }) this.recorderManager.stop(); console.log('按了' +
shijian+'秒'); console.log('width是',width); }, // 实时监测变化调用这些方法
onShow:function(e){ var that=this; // 初始化录音对象 this.recorderManager =
wx.getRecorderManager(); this.recorderManager.onError(function () {
that.tip("录音失败！") }); // 录音结束 this.recorderManager.onStop(function (res) { var
list=that.data.list; var width = that.data.width; var src = res.tempFilePath;
console.log('list的1是',list) // console.log(src) var aa={ src: src, width:
width, play:false } list.push(aa); console.log('list的2是', list) that.setData({
list: list }) // that.tip("录音完成！") //console.log(list) });
this.innerAudioContext = wx.createInnerAudioContext();
this.innerAudioContext.onError((res) => { that.tip("播放录音失败！") }) }, tip:
function (msg) { wx.showModal({ title: '提示', content: msg, showCancel: false })
}, // 播放录音 audioPlay: function (e) { var that = this; var src =
e.currentTarget.dataset.src; if (src == '') { this.tip("失效") return; }
this.innerAudioContext.src = src; this.innerAudioContext.play(); }, })

下面是wxml代码
<view class='body'> <view class='center'> <block wx:for="{{list}}"> <view
style='width:{{item.width+200}}rpx' bindtap="audioPlay" data-src="{{item.src}}"
class='myLuYin'>录音{{index+1}}</view> </block> </view> </view> <button
class="{{luStatu?'btTouch':'bt'}}"
bind:touchstart="touchStart"bind:touchend="touchEnd" type='primary'> <text
wx:if="{{luStatu}}">松开结束</text> <text wx:else>按住说话 </text> </button>
以下是css代码
.body{ position: absolute; padding-bottom: 100rpx; } .bt{ width: 100%;
position: fixed; bottom: 0; left: 0; z-index: 69; height: 100rpx; } .btTouch{
background: #e2e2e2 !important; color: #333333 !important; width: 100%;
position: fixed; bottom: 0; left: 0; z-index: 69; height: 100rpx; } .myLuYin{
height: 80rpx; background: greenyellow; border-radius:6rpx; margin: 15rpx 0;
text-align: center; line-height: 80rpx; font-size: 32rpx; color: #fff; }
.center{ width: 90%; margin: 0 auto; }

热门工具换一换