小程序 - 录音机
微信小程序常用API练习 - 录音机小程序开发笔记
目录
录音机
录音机是生活中的常用工具，可以记录声音和播放声音。它可以在开会的时候记录说话人的声音，也可以在生活中留下一段美妙歌声。本案例将对“录音机”微信小程序的开发进行详细讲解。
录音机”微信小程序页面分为顶部区域和按钮控制区域。其中，顶部区域展示录音时长，按钮控制区域中从左到右的3个按钮分别是“播放录音”按钮、“开始/暂停录音”按钮和“停止录音”按钮，这3个按钮分别实现了播放录音、开始或暂停录音、停止录音的功能。
准备工作
在开发本案例前，需要先完成一些准备工作，主要包括创建项目、配置导航栏和复制素材，
具体步骤如下。
创建项目
在微信开发者工具中创建一个新的项目，项目名称为“录音机”，模板选择“不使用模板”。
配置导航栏
在pages/index/index.json文件中配置页面导航栏，具体代码如下：
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
},
"navigationBarTitleText": "录音机"
}加载图片资源
创建images文件夹，放入三个图片，分别为：播放、开始录制、结束的功能按钮显示icon。
如下图：
创建模块脚本
创建utils文件夹，并创建timer.js封装一些对录音Api操作方法，用以在录音机中调用：
包含开始、结束录音，更新录音的时间等。
项目结构如下：
具体代码如下：
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;
}
}录音机页面布局
录音机的页面布局在pages/index/index.wxml中编写。主要分为两个部分：上面显示标题和录音时间，下方显示三个功能按钮，从左到右分别为：播放、开始录制、结束录制。
具体代码如下：
<!--index.wxml-->
<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>录音机页面样式
对录音机页面样式的设置在pages/index/index.wxss中编写，具体代码如下：
/**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;
}录音机脚本控制
对录音机功能操作的脚本控制在pages/index/index.js中编写。主要内容为：设置初始变量，开始录制、暂停、停止及录音文件播放脚本。
具体代码如下：
// 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: '暂无录音'
})
}
}
})功能截图
总结
微信小程序常用API练习 - 录音机小程序开发笔记
原文地址：https://blog.csdn.net/json_ligege/article/details/144369751
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！