当前位置：个人在线分享 > 小程序简单版录音机

小程序简单版录音机

作者 : admin 本文共5539个字，预计阅读时间需要14分钟 发布时间： 2024-06-9 共3人阅读

先来看看效果

小程序简单版录音机插图

结构

先来看看页面结构

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

}

核心代码

计时函数

🆗，接下来要实现点击录音按钮，进行一个计时效果
小程序简单版录音机插图(1)

这边是一个计时函数，写得比较繁琐，要是各位大大有更好的办法也欢迎补充

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

小程序简单版录音机插图(2)

  • 失联

最后编辑时间 2024，6，07；9：40

本站无任何商业行为
个人在线分享 » 小程序简单版录音机
admin

admin 钻石

分享到：

相关推荐

E-->