小步伐 - 灌音机

微信小步伐常用API练习 - 灌音机小步伐开辟笔记
  目录
灌音机
预备工作
创建项目
配置导航栏
加载图片资源
创建模块脚本
灌音机页面布局
灌音机页面样式
灌音机脚本控制
功能截图
总结

---

灌音机

灌音机是生活中的常用工具，可以记录声音和播放声音。它可以在开会的时候记录说话人的声音，也可以在生活中留下一段优美歌声。本案例将对“灌音机”微信小步伐的开辟进行详细解说。

灌音机”微信小步伐页面分为顶部区域和按钮控制区域。其中，顶部区域展示灌音时长，按钮控制区域中从左到右的3个按钮分别是“播放灌音”按钮、​“开始/暂停灌音”按钮和“停止灌音”按钮，这3个按钮分别实现了播放灌音、开始或暂停灌音、停止灌音的功能。

预备工作

在开辟本案例前，需要先完成一些预备工作，主要包罗创建项目、配置导航栏和复制素材，
详细步骤如下。

创建项目

在微信开辟者工具中创建一个新的项目，项目名称为“灌音机”，模板选择“不使用模板”。

配置导航栏

在pages/index/index.json文件中配置页面导航栏，详细代码如下：

1. {
2.   "usingComponents": {
3.     "navigation-bar": "/components/navigation-bar/navigation-bar"
4.   },
5.   "navigationBarTitleText": "录音机"
6. }

复制代码

加载图片资源

创建images文件夹，放入三个图片，分别为：播放、开始录制、竣事的功能按钮显示icon。
如下图：

创建模块脚本

创建utils文件夹，并创建timer.js封装一些对灌音Api操作方法，用以在灌音机中调用：
包含开始、竣事灌音，更新灌音的时间等。
项目结构如下：

详细代码如下：

1. module.exports = {
2.     message: 'timer',
3.     recorderManager:wx.getRecorderManager(),// 获取录音管理器对象
4.     options: {
5.         duration: 60000, // 最长录音时间为60秒
6.         sampleRate: 44100, // 采样率
7.         numberOfChannels: 1, // 单声道
8.         encodeBitRate: 192000, // 编码码率
9.         format: 'mp3' // 录音文件格式
10.     },
11.     // 开始录音
12.     start() {
13.         this.recorderManager.start(this.options)
14.     },
15.     // 暂停录音
16.     pause() {
17.         this.recorderManager.pause(this.options)
18.     },
19.     // 停止录音
20.     stop(){
21.         this.recorderManager.stop(this.options)
22.     },
23.     // 时间格式转化
24.     getTime(seconds) {
25.         var hours = Math.floor(seconds / 3600);
26.         var minutes = Math.floor((seconds % 3600) / 60);
27.         var secods = seconds % 60;
28.         secods = secods >= 10 ? secods : "0" + secods
29.         if (minutes > 0) {
30.             minutes = minutes >= 10 ? minutes : "0" + minutes;
31.         } else {
32.             minutes = "00";
33.         }
34.         if (hours > 0) {
35.             hours = hours >= 10 ? hours : '0' + hours;
36.         } else {
37.             hours = "00";
38.         }
39.         return hours + ":" + minutes + ":" + secods;
40.     }
41. }

复制代码

灌音机页面布局

灌音机的页面布局在pages/index/index.wxml中编写。主要分为两个部分：上面显示标题和灌音时间，下方显示三个功能按钮，从左到右分别为：播放、开始录制、竣事录制。
详细代码如下：

1. <!--index.wxml-->
2. <navigation-bar title="录音机" back="{{false}}" color="black" background="#FFF"></navigation-bar>
3. <view class="container">
4.     <view class="top">
5.         <view class="top-title">录音机</view>
6.         <view class="top-time">{{ time }}</view>
7.     </view>
8.     <view class="control">
9.         <view class="btn btn-play" bindtap="play" hover-class="btn-hover" hover-stay-time="50">
10.             <image src="/images/play.png" mode=""/>
11.         </view>
12.         <view class="btn btn-rec {{ state ===  1 ? 'btn-rec-pause' : 'btn-rec-normal' }}" bindtap="rec" hover-class="btn-hover" hover-stay-time="50">
13.             <image src="/images/center.png" mode=""/>
14.         </view>
15.         <view class="btn btn-stop" bindtap="stop" hover-class="btn-hover" hover-stay-time="50">
16.             <image src="/images/stop.png" mode=""/>
17.         </view>
18.     </view>
19. </view>

复制代码

灌音机页面样式

对灌音机页面样式的设置在pages/index/index.wxss中编写，详细代码如下：

1. /**index.wxss**/
2. .top {
3.     margin: 0 auto;
4.     text-align: center;
5. }
7. .top .top-title {
8.     font-size: 30px;
9. }
11. .top .top-time {
12.     margin-top:5vh;
13.     font-size: 60px;
14. }
16. .control {
17.     margin-top:10vh;
18.     display: flex;
19.     flex-direction: row;
20. }
22. .btn {
23.     margin: 0 10vw;
24. }
26. .btn-play image{
27.     width:50px;
28.     height:50px;
29.     border-radius: 20px;
30.     margin-top:30px;
31. }
33. .btn-rec image{
34.     width:100px;
35.     height:100px;
36.     border-radius: 30px;
37. }
39. .btn-stop image{
40.     width:50px;
41.     height:50px;
42.     border-radius: 20px;
43.     margin-top:30px;
44. }

复制代码

灌音机脚本控制

对灌音机功能操作的脚本控制在pages/index/index.js中编写。主要内容为：设置初始变量，开始录制、暂停、停止及灌音文件播放脚本。
详细代码如下：

1. // index.js
2. const timer = require('../../utils/timer.js')
3. // 音频对象
4. var audioCtx = wx.createInnerAudioContext()
5. // 初始化录音功能
6. var rec = wx.getRecorderManager()
7. var tempFilePath = null
8. rec.onStop(res => {
9.     tempFilePath = res.tempFilePath
10.     console.log('录音成功：' + tempFilePath)
11. })
12. Page({
13.     data: {
14.         time: '00:00:00',   // 录音时长
15.         state: 0,           // 录音状态，0表示停止，1表示开始，2表示暂停
16.         seconds: 0,         // 秒数
17.     },
18.     // 实现开始或暂停录音
19.     rec: function () {
20.         var that = this;
21.         switch (this.data.state) {
22.             case 0:
23.                 rec.start()
24.                 // 开始计时
25.                 this.timer = setInterval(function () {
26.                     that.setData({
27.                         seconds: that.data.seconds + 1,
28.                         time: timer.getTime(that.data.seconds)
29.                     })
30.                 }, 1000);
31.                 timer.start()
32.                 this.setData({
33.                     time: '00:00:00',
34.                     state: 1
35.                 })
36.                 break
37.             case 1:
38.                 rec.pause()
39.                 timer.pause()
40.                 this.setData({
41.                     state: 2
42.                 })
43.                 break
44.             case 2:
45.                 rec.resume()
46.                 timer.start()
47.                 this.setData({
48.                     state: 1
49.                 })
50.                 break
51.         }
52.     },
53.     // 停止录音
54.     stop: function () {
55.         console.log("停止")
56.         var onStopCallBack = null
57.         rec.onStop(res => {
58.             tempFilePath = res.tempFilePath
59.             console.log('录音成功：' + tempFilePath)
60.             onStopCallBack && onStopCallBack(tempFilePath)
61.         })
62.         this.setData({
63.             time: '00:00:00',
64.             state: 0,
65.             seconds:0
66.         });
67.         timer.stop()
68.         // 清除定时器
69.         clearInterval(this.timer)
70.     },
71.     // 播放录音
72.     play: function () {
73.         console.log("播放录音")
74.         if (this.data.state > 0) {
75.             // 第1种情况，录音尚未完成
76.             onStopCallBack = tempFilePath => {
77.                 onStopCallBack = null
78.                 audioCtx.src = tempFilePath
79.                 audioCtx.play()
80.                 this.setData({
81.                     time: '播放录音'
82.                 })
83.             }
84.             this.stop()
85.         } else if (tempFilePath) {
86.             // 第2种情况，录音已完成
87.             audioCtx.src = tempFilePath
88.             audioCtx.play()
89.             this.setData({
90.                 time: '播放录音'
91.             })
92.         } else {
93.             // 第3种情况，尚未录音
94.             this.setData({
95.                 time: '暂无录音'
96.             })
97.         }
98.     }
99. })

复制代码

功能截图

总结

微信小步伐常用API练习 - 灌音机小步伐开辟笔记

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。