小程序简单版录音机

  • 开发
  • 7

先来看看效果

在这里插入图片描述

结构

先来看看页面结构

    <!-- 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 = this
    var second = _this.data.second
    var minute = _this.data.minute
    var 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() // 释放音频资源
        break
      case 1:
        clearInterval(_this.data.timer);
        // 暂停录音
        tape.pause()
        console.log('暂停录音');
        this.setData({
          state: 2 // 把state设置为2 （继续录音状态）
        })
        break
      case 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.tempFilePath
        console.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.tempFilePath
      console.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() // 释放音频资源
        break
      case 1:
        clearInterval(_this.data.timer);
        // 暂停录音
        tape.pause()
        console.log('暂停录音');
        this.setData({
          state: 2 // 把state设置为2 （继续录音状态）
        })
        break
      case 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.tempFilePath
        console.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.tempFilePath
      console.log('保存录音');
      wx.showToast({
        title: '保存录音成功',
        mask: true,
        duration: 500,
      })
    })
  },



  // 计时器
  setInterval() {
    const _this = this
    var second = _this.data.second
    var minute = _this.data.minute
    var 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

阅读全部

相关推荐

  2. 微信小程序写一个录音机

    2024-06-08 12:14:02       5 阅读

  3. 微信小程序录音机源代码

    2024-06-08 12:14:02       11 阅读

  4. uniapp小程序--录音功能

    2024-06-08 12:14:02       17 阅读

  6. 微信小程序-语音输入(录音并播放）

    2024-06-08 12:14:02       17 阅读

  7. Linux下非常实用的asla卡录音小程序

    2024-06-08 12:14:02       9 阅读

  10. 微信小程序开发步骤及简单开发案例

    2024-06-08 12:14:02       32 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-06-08 12:14:02       19 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-06-08 12:14:02       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-06-08 12:14:02       20 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-06-08 12:14:02       20 阅读

热门阅读

  1. #07 使用Stable Diffusion生成高质量图片的技巧

    2024-06-08 12:14:02       9 阅读

  4. HTTP参数污染漏洞

    2024-06-08 12:14:02       9 阅读

  9. 速盾：图片cdn托管

    2024-06-08 12:14:02       10 阅读

  10. 8086 汇编笔记（六）：更灵活的定位内存地址的方法

    2024-06-08 12:14:02       12 阅读

  12. 挣值计算中的典型与非典型

    2024-06-08 12:14:02       9 阅读

  13. Objective-C中分类无法添加实例变量的底层原理

    2024-06-08 12:14:02       10 阅读

  14. android原生TabLayout之自定义指示器效果

    2024-06-08 12:14:02       10 阅读

  16. Redis持久化机制：RDB与AOF的原理和最佳实践

    2024-06-08 12:14:02       10 阅读

  17. 2023 N1CTF Junior pwn 顶级签到

    2024-06-08 12:14:02       11 阅读

  20. C++ 实现Python 列表list 的两种方法

    2024-06-08 12:14:02       8 阅读

  21. flutter 解析json另类封装方式 List＜bean＞，哈哈哈

    2024-06-08 12:14:02       8 阅读

  24. Linux学习之查看文件内容

    2024-06-08 12:14:02       12 阅读

  26. linux-磁盘空间显示指令

    2024-06-08 12:14:02       9 阅读

  27. 基于截图和模拟点击的自动化压测工具开发(MFC)

    2024-06-08 12:14:02       8 阅读

  29. Git - 创建和应用patch

    2024-06-08 12:14:02       10 阅读