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

微信小程序简易录音机

news 2025/7/19 23:22:43

首先先创建一个项目（想必大家都会啦那就直接开干）

首先上html结构

<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>

css样式

/* 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);}

样式的效果：
在这里插入图片描述
接下来js代码部分：
通过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)},

播放

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