小步伐 - 灌音机 - ToB企服应用市场:ToB评测及商务社交产业平台

{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
},
"navigationBarTitleText": "录音机"
}

复制代码

module.exports = {
message: 'timer',
recorderManager:wx.getRecorderManager(),// 获取录音管理器对象
options: {
duration: 60000, // 最长录音时间为60秒
sampleRate: 44100, // 采样率
numberOfChannels: 1, // 单声道
encodeBitRate: 192000, // 编码码率
format: 'mp3' // 录音文件格式
},
// 开始录音
start() {
this.recorderManager.start(this.options)
},
// 暂停录音
pause() {
this.recorderManager.pause(this.options)
},
// 停止录音
stop(){
this.recorderManager.stop(this.options)
},
// 时间格式转化
getTime(seconds) {
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds % 3600) / 60);
var secods = seconds % 60;
secods = secods >= 10 ? secods : "0" + secods
if (minutes > 0) {
minutes = minutes >= 10 ? minutes : "0" + minutes;
} else {
minutes = "00";
}
if (hours > 0) {
hours = hours >= 10 ? hours : '0' + hours;
} else {
hours = "00";
}
return hours + ":" + minutes + ":" + secods;
}
}

复制代码

<navigation-bar title="录音机" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view class="container">
<view class="top">
<view class="top-title">录音机</view>
<view class="top-time">{{ time }}</view>
</view>
<view class="control">
<view class="btn btn-play" bindtap="play" hover-class="btn-hover" hover-stay-time="50">
<image src="/images/play.png" mode=""/>
</view>
<view class="btn btn-rec {{ state === 1 ? 'btn-rec-pause' : 'btn-rec-normal' }}" bindtap="rec" hover-class="btn-hover" hover-stay-time="50">
<image src="/images/center.png" mode=""/>
</view>
<view class="btn btn-stop" bindtap="stop" hover-class="btn-hover" hover-stay-time="50">
<image src="/images/stop.png" mode=""/>
</view>
</view>
</view>

复制代码

/**index.wxss**/
.top {
margin: 0 auto;
text-align: center;
}
.top .top-title {
font-size: 30px;
}
.top .top-time {
margin-top:5vh;
font-size: 60px;
}
.control {
margin-top:10vh;
display: flex;
flex-direction: row;
}
.btn {
margin: 0 10vw;
}
.btn-play image{
width:50px;
height:50px;
border-radius: 20px;
margin-top:30px;
}
.btn-rec image{
width:100px;
height:100px;
border-radius: 30px;
}
.btn-stop image{
width:50px;
height:50px;
border-radius: 20px;
margin-top:30px;
}

复制代码

// index.js
const timer = require('../../utils/timer.js')
// 音频对象
var audioCtx = wx.createInnerAudioContext()
// 初始化录音功能
var rec = wx.getRecorderManager()
var tempFilePath = null
rec.onStop(res => {
tempFilePath = res.tempFilePath
console.log('录音成功：' + tempFilePath)
})
Page({
data: {
time: '00:00:00', // 录音时长
state: 0, // 录音状态，0表示停止，1表示开始，2表示暂停
seconds: 0, // 秒数
},
// 实现开始或暂停录音
rec: function () {
var that = this;
switch (this.data.state) {
case 0:
rec.start()
// 开始计时
this.timer = setInterval(function () {
that.setData({
seconds: that.data.seconds + 1,
time: timer.getTime(that.data.seconds)
})
}, 1000);
timer.start()
this.setData({
time: '00:00:00',
state: 1
})
break
case 1:
rec.pause()
timer.pause()
this.setData({
state: 2
})
break
case 2:
rec.resume()
timer.start()
this.setData({
state: 1
})
break
}
},
// 停止录音
stop: function () {
console.log("停止")
var onStopCallBack = null
rec.onStop(res => {
tempFilePath = res.tempFilePath
console.log('录音成功：' + tempFilePath)
onStopCallBack && onStopCallBack(tempFilePath)
})
this.setData({
time: '00:00:00',
state: 0,
seconds:0
});
timer.stop()
// 清除定时器
clearInterval(this.timer)
},
// 播放录音
play: function () {
console.log("播放录音")
if (this.data.state > 0) {
// 第1种情况，录音尚未完成
onStopCallBack = tempFilePath => {
onStopCallBack = null
audioCtx.src = tempFilePath
audioCtx.play()
this.setData({
time: '播放录音'
})
}
this.stop()
} else if (tempFilePath) {
// 第2种情况，录音已完成
audioCtx.src = tempFilePath
audioCtx.play()
this.setData({
time: '播放录音'
})
} else {
// 第3种情况，尚未录音
this.setData({
time: '暂无录音'
})
}
}
})

复制代码