原计划是要做一个当用户点击录制按钮时,波纹滚动的效果,由于微信context.drawImage问题,所以暂时搁置。
这个页面要考虑到的问题:
-
需要记录开始录音的时间以及停止录音的时间来计算出录音时长。
-
在用户录音时,这个button的样式需要改变。
-
在录音过程中,我们需要动态的向用户显示时间,就像一个时钟一样。以告诉用户他录了多久的语音。
-
有三个信息需要存储,一是语音的临时地址,我们需要在finish页面播放语音,并且上传到服务器,
二是,durationTime,也就是语音的时长,单位时毫秒,这个也是需要上传到服务器的,最后一个是stringTime, 主要是为了在用户进入finish页面时,能一眼看到自己的语音有多长时间。
解决思路:
-
在 wx.startRecord 时调用New Date().getTime()来获得开始时间,在 wx.stopRecord 时调用New Date().getTime()来获得结束时间,这样就能计算录音时长 durationTime,不过这个单位时毫秒数。
-
这个就很简单了,用一下setData({})就可以实现了。
-
首先我们需要将毫秒数转化为秒,然后调用 NumberToTime 这个函数,最后我们还需要用到递归。
-
这里涉及到一个页面间通信的问题,我在这里用app的全局变量来实现。
下面看源代码,我会在源代码加上更多的注释,这样就会清晰的多
var util = require('../../utils/util.js') var startTime , endTime; var app = getApp(); Page({ data: { Recording: false, //在录音还是没有,根据此状态可以改变button的样式等等 numberTime: 0, //数字时间,用于转换成字符串时间 stringTime: '00:00' //字符串时间 }, //这是为了保证用户从finish页面返回,所以需要将其初始化 onShow: function() { this.setData({ stringTime: '00:00', numberTime: 0, }) }, //button的事件函数 bindTapRecord: function() { var _this = this if(this.data.Recording === false) { //记录开始录音的时间 startTime = new Date().getTime() this.setData({Recording: true}) //调用设置字符串时间的函数 this.showTime() wx.startRecord({ success: function(res){ //记录录音的临时地址,用于下个页面的播放以及上传 app.globalData.tempfillPath = res.tempFilePath }, fail: function(res) { console.error('something wrong in startRecord: ', res) } }) } else { wx.stopRecord() // 记录停止录音的时间 endTime = new Date().getTime() // 存储录音时长,单位时毫秒 app.globalData.durationTime = endTime - startTime // 存储录音时长,字符串格式,以用于在下个页面展示 app.globalData.stringTime = _this.data.stringTime this.setData({ Recording: false}) // wx.navigateTo({ // url: '/pages/finish/finish', // }) } }, //递归函数,用于显示感觉时间在流逝 showTime: function() { var _this = this //每隔1秒,使numberTime加1,然后将其转换为字符串格式的时间格式,并赋值给stringTime //这个函数需要外部data:numberTime,stringTime,not good _this.setData({numberTime: _this.data.numberTime + 1}) _this.setData({stringTime: util.NumberToTime(this.data.numberTime)}) if(_this.data.Recording) { setTimeout(function(){ _this.showTime() }, 1000) } } })