当前位置：首页 > news >正文

小程序简单版录音机

news 来源：原创 2024/9/28 8:46:09

先来看看效果

在这里插入图片描述

结构

先来看看页面结构

    <!-- 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)}
})