先来看看效果
结构
先来看看页面结构
html
<!-- 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>
页面样式
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);
}
核心代码
计时函数
🆗,接下来要实现点击录音按钮,进行一个计时效果
这边是一个计时函数,写得比较繁琐,要是各位大大有更好的办法也欢迎补充
javascript
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()
详细方法请查看官方文档
javascript
// 获取录音管理器
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)
}
})
有了这些咱们就可以正常的进行计时和录音功能
结束事件(保存录音)
接下来我们来进行保存录音和把计时器清零的操作
javascript
// 结束
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,
})
})
},
播放录音
最后一步就很简单了,给音频设置上路径播放音频就好
javascript
//播放
play() {
// 如果音频路径为空,弹出提示
if (!this.data.tempFilePath) {
wx.showModal({
title: '没有录音',
content: '请开始录音或保存录音'
})
return
}
audio.src = this.data.tempFilePath
// 播放录音的音频
audio.play()
wx.showToast({
title: '播放录音',
mask: true,
duration: 500
})
},
到这里呢,一个简单版的录音机基本功能就已经完全实现了,下面将附上完整代码,如有错误的地方,请斧正
javascript
// 获取录音管理器
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