先来看看效果
结构
先来看看页面结构
<!-- wxml --><view class="wx-container"><view id="title">录音机</view><view id="time">{{hours}}:{{minute}}:{{second}}</view><view class="btngroup"><view hover-class="change" catch:tap="play">播放</view><view class="play" hover-class="change" catch:tap="start"></view><view hover-class="change" catch:tap="stop">结束</view></view>
</view>
页面样式
/* pages/radio/index.wxss */
.wx-container {width: 100vw;height: 100vh;margin: 0 auto;text-align: center;box-sizing: border-box;
}#title {margin: 100rpx auto;text-align: center;font-size: 50rpx;}#time {font-size: 150rpx;
}.btngroup {height: 180rpx;margin: 100rpx auto;display: flex;align-items: center;justify-content: space-around;
}.btngroup>view:not(.play) {width: 120rpx;height: 120rpx;border-radius: 50%;line-height: 120rpx;background-color: #eee;
}.play {width: 150rpx;height: 150rpx;border: solid 50rpx red;box-sizing: border-box;border-radius: 50%;transition: .2s;background-color: transparent;
}.change {transition: .2s;box-shadow: 0 0 8rpx 8rpx rgb(0, 0, 0);}
核心代码
计时函数
🆗,接下来要实现点击录音按钮,进行一个计时效果
这边是一个计时函数,写得比较繁琐,要是各位大大有更好的办法也欢迎补充
Page({data: {time: 0,cleartime: '',timer: null,hours: '0' + 0, // 时minute: '0' + 0, // 分second: '0' + 0, // 秒},// -----------------------------
// 计时器setInterval() {const _this = thisvar second = _this.data.secondvar minute = _this.data.minutevar hours = _this.data.hours_this.data.timer = setInterval(function () { // 设置定时器second++if (second >= 60) {second = 0 // 大于等于60秒归零minute++if (minute >= 60) {minute = 0 // 大于等于60分归零hours++if (hours < 10) {// 少于10补零_this.setData({hours: '0' + hours})} else {_this.setData({hours: hours})}}if (minute < 10) {// 少于10补零_this.setData({minute: '0' + minute})} else {_this.setData({minute: minute})}}if (second < 10) {// 少于10补零_this.setData({second: '0' + second})} else {_this.setData({second: second})}}, 1000)}})
开始事件
现在开始为播放按钮设置事件,那我们先来
获取录音管理器
wx.getRecorderManager()
详细方法请查看官方文档
创建全局音频
wx.createInnerAudioContext()
详细方法请查看官方文档
// 获取录音管理器
var tape = wx.getRecorderManager()
// 创建全局音频
var audio = wx.createInnerAudioContext()
Page({data: {time: 0,cleartime: '',state: 0, // 0 为停止录音 1 为正在录音 2 为暂停录音timer: null,hours: '0' + 0, // 时minute: '0' + 0, // 分second: '0' + 0, // 秒tempFilePath: null},//计时开始start() {let _this = this;switch (this.data.state) {case 0:_this.setInterval();// 开始录音tape.start()console.log('开始录音');this.setData({state: 1 // 把state设置为1 (暂停录音状态)})// audio.destroy() // 释放音频资源breakcase 1:clearInterval(_this.data.timer);// 暂停录音tape.pause()console.log('暂停录音');this.setData({state: 2 // 把state设置为2 (继续录音状态)})breakcase 2:_this.setInterval();// 继续录音tape.resume()console.log('继续录音');this.setData({state: 1 // 把state设置为1 (暂停录音状态)})break}// 为了性能考虑 20 秒后自动结束录音 setTimeout(() => {clearInterval(_this.data.timer);tape.stop()// 监听结束录音事件tape.onStop((res) => {this.data.tempFilePath = res.tempFilePathconsole.log('自动保存录音');wx.showToast({title: '自动保存录音成功',mask: true,duration: 500,})})}, 20000)}})
有了这些咱们就可以正常的进行计时和录音功能
结束事件(保存录音)
接下来我们来进行保存录音和把计时器清零的操作
// 结束stop() {// 如果state处于0(未录音状态)弹出提示if (this.data.state == 0) {wx.showToast({title: '请先开始录音',mask: true,duration: 500,icon: 'error'})return}let _this = this;this.setData({hours: '0' + 0,minute: '0' + 0,second: '0' + 0,state: 0 // 点击结束按钮之后 把 state(状态)初始化为0(未录音状态)})clearInterval(_this.data.timer);// 结束录音 保存录音tape.stop()// 监听结束录音事件tape.onStop((res) => {this.data.tempFilePath = res.tempFilePathconsole.log('保存录音');wx.showToast({title: '保存录音成功',mask: true,duration: 500,})})},
播放录音
最后一步就很简单了,给音频设置上路径播放音频就好
//播放play() {// 如果音频路径为空,弹出提示if (!this.data.tempFilePath) {wx.showModal({title: '没有录音',content: '请开始录音或保存录音'})return}audio.src = this.data.tempFilePath// 播放录音的音频audio.play()wx.showToast({title: '播放录音',mask: true,duration: 500})},
到这里呢,一个简单版的录音机基本功能就已经完全实现了,下面将附上完整代码,如有错误的地方,请斧正
// 获取录音管理器
var tape = wx.getRecorderManager()
// 创建全局音频
var audio = wx.createInnerAudioContext()
Page({data: {time: 0,cleartime: '',state: 0, // 0 为停止录音 1 为正在录音 2 为暂停录音timer: null,hours: '0' + 0, // 时minute: '0' + 0, // 分second: '0' + 0, // 秒tempFilePath: null},//计时开始start() {let _this = this;switch (this.data.state) {case 0:_this.setInterval();// 开始录音tape.start()console.log('开始录音');this.setData({state: 1 // 把state设置为1 (暂停录音状态)})// audio.destroy() // 释放音频资源breakcase 1:clearInterval(_this.data.timer);// 暂停录音tape.pause()console.log('暂停录音');this.setData({state: 2 // 把state设置为2 (继续录音状态)})breakcase 2:_this.setInterval();// 继续录音tape.resume()console.log('继续录音');this.setData({state: 1 // 把state设置为1 (暂停录音状态)})break}// 为了性能考虑 20 秒后自动结束录音 setTimeout(() => {clearInterval(_this.data.timer);tape.stop()// 监听结束录音事件tape.onStop((res) => {this.data.tempFilePath = res.tempFilePathconsole.log('自动保存录音');wx.showToast({title: '自动保存录音成功',mask: true,duration: 500,})})}, 20000)},//播放play() {// 如果音频路径为空,弹出提示if (!this.data.tempFilePath) {wx.showModal({title: '没有录音',content: '请开始录音或保存录音'})return}audio.src = this.data.tempFilePath// 播放录音的音频audio.play()wx.showToast({title: '播放录音',mask: true,duration: 500})},// 结束stop() {// 如果state处于0(未录音状态)弹出提示if (this.data.state == 0) {wx.showToast({title: '请先开始录音',mask: true,duration: 500,icon: 'error'})return}let _this = this;this.setData({hours: '0' + 0,minute: '0' + 0,second: '0' + 0,state: 0 // 点击结束按钮之后 把 state(状态)初始化为0(未录音状态)})clearInterval(_this.data.timer);// 结束录音 保存录音tape.stop()// 监听结束录音事件tape.onStop((res) => {this.data.tempFilePath = res.tempFilePathconsole.log('保存录音');wx.showToast({title: '保存录音成功',mask: true,duration: 500,})})},// 计时器setInterval() {const _this = thisvar second = _this.data.secondvar minute = _this.data.minutevar hours = _this.data.hours_this.data.timer = setInterval(function () { // 设置定时器second++if (second >= 60) {second = 0 // 大于等于60秒归零minute++if (minute >= 60) {minute = 0 // 大于等于60分归零hours++if (hours < 10) {// 少于10补零_this.setData({hours: '0' + hours})} else {_this.setData({hours: hours})}}if (minute < 10) {// 少于10补零_this.setData({minute: '0' + minute})} else {_this.setData({minute: minute})}}if (second < 10) {// 少于10补零_this.setData({second: '0' + second})} else {_this.setData({second: second})}}, 1000)}
})
- 失联
最后编辑时间 2024,6,07;9:40