From 22d0df1fb3aeece72c75f01e720df5b14ffbb49d Mon Sep 17 00:00:00 2001
From: limin <limin@finogeeks.com>
Date: Wed, 9 Dec 2020 16:48:34 +0800
Subject: [PATCH] feat: record-voice

---
 app.json                   |  3 +-
 pages/API/voice/voice.js   | 61 ++++++++++++++++++++++++++++++++++++
 pages/API/voice/voice.json |  3 ++
 pages/API/voice/voice.wxml | 64 ++++++++++++++++++++++++++++++++++++++
 pages/API/voice/voice.wxss | 41 ++++++++++++++++++++++++
 5 files changed, 171 insertions(+), 1 deletion(-)
 create mode 100644 pages/API/voice/voice.js
 create mode 100644 pages/API/voice/voice.json
 create mode 100644 pages/API/voice/voice.wxml
 create mode 100644 pages/API/voice/voice.wxss

diff --git a/app.json b/app.json
index 54cffce..09dd88b 100644
--- a/app.json
+++ b/app.json
@@ -59,7 +59,8 @@
     "pages/API/get-wxml-node-info/get-wxml-node-info",
     "pages/API/intersection-observer/intersection-observer",
     "pages/API/download-file/download-file",
-    "pages/API/upload-file/upload-file"
+    "pages/API/upload-file/upload-file",
+    "pages/API/voice/voice"
   ],
   "window": {
     "backgroundTextStyle": "light",
diff --git a/pages/API/voice/voice.js b/pages/API/voice/voice.js
new file mode 100644
index 0000000..c8d8805
--- /dev/null
+++ b/pages/API/voice/voice.js
@@ -0,0 +1,61 @@
+// pages/API/voice/voice.js
+const util = require('../../../utils/util.js')
+
+let playTimeInterval
+let recordTimeInterval
+Page({
+  data: {
+    recording: false, // 录音中
+    filePath: '',
+  },
+
+  onHide() {
+    if (this.data.recording) {
+      wx.stopRecord() // 结束录音
+    }
+  },
+  startRecord() {
+    this.setData({
+      recording: true,
+    })
+    wx.startRecord({
+      success (res) {
+        const tempFilePath = res.tempFilePath
+        this.setData({
+          filePath: tempFilePath,
+        })
+      }
+    })
+  },
+  stopRecord() {
+    this.setData({
+      recording: false,
+    })
+    wx.stopRecord() // 结束录音
+  },
+  playVoice() {
+    wx.playVoice({
+      filePath: this.data.filePath,
+      success: (res) => {
+        console.log('播放成功', res);
+      },
+      fail: (res) =>{
+        console.log('播放失败', res);
+      }
+    })
+  },
+  stopVoice() {
+    wx.stopVoice({
+      filePath: this.data.filePath,
+      success: (res) => {
+        console.log('播放成功', res);
+      },
+      fail: (res) =>{
+        console.log('播放失败', res);
+      }
+    })
+  },
+  pauseVoice() {
+    wx.pauseVoice();
+  }
+})
diff --git a/pages/API/voice/voice.json b/pages/API/voice/voice.json
new file mode 100644
index 0000000..d6969d3
--- /dev/null
+++ b/pages/API/voice/voice.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "录音"
+}
diff --git a/pages/API/voice/voice.wxml b/pages/API/voice/voice.wxml
new file mode 100644
index 0000000..8b920ee
--- /dev/null
+++ b/pages/API/voice/voice.wxml
@@ -0,0 +1,64 @@
+<!--pages/API/voice/voice.wxml-->
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: '录音/音频'}}"/>
+
+  <view class="page-body">
+    <view class="page-section">
+      <block wx:if="{{recording === false && playing === false && hasRecord === false}}">
+        <view class="page-body-time">
+          <text class="time-big">{{formatedRecordTime}}</text>
+        </view>
+        <view class="page-body-buttons">
+          <view class="page-body-button"></view>
+          <view class="page-body-button" bindtap="startRecord">
+            <image src="/image/record.png"></image>
+          </view>
+          <view class="page-body-button"></view>
+        </view>
+      </block>
+
+      <block wx:if="{{recording === true}}">
+        <view class="page-body-time">
+          <text class="time-big">{{formatedRecordTime}}</text>
+        </view>
+        <view class="page-body-buttons">
+          <view class="page-body-button"></view>
+          <view class="page-body-button" bindtap="stopRecord">
+            <view class="button-stop-record"></view>
+          </view>
+          <view class="page-body-button"></view>
+        </view>
+      </block>
+
+      <block wx:if="{{filePath && recording === false}}">
+        <button type="primary" bindtap="audioPlay">播放</button>
+        <button type="primary" bindtap="audioPause">暂停</button>
+        <button type="primary" bindtap="audioStop">结束</button>
+      </block>
+
+      <!-- <block wx:if="{{hasRecord === true && playing === true}}">
+        <view class="page-body-time">
+          <text class="time-big">{{formatedPlayTime}}</text>
+          <text class="time-small">{{formatedRecordTime}}</text>
+        </view>
+        <view class="page-body-buttons">
+          <view class="page-body-button" bindtap="stopVoice">
+            <image src="/image/stop.png"></image>
+          </view>
+          <view class="page-body-button" bindtap="pauseVoice">
+            <image src="/image/pause.png"></image>
+          </view>
+          <view class="page-body-button" bindtap="clear">
+            <image src="/image/trash.png"></image>
+          </view>
+        </view>
+      </block> -->
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>
+
diff --git a/pages/API/voice/voice.wxss b/pages/API/voice/voice.wxss
new file mode 100644
index 0000000..bd2f990
--- /dev/null
+++ b/pages/API/voice/voice.wxss
@@ -0,0 +1,41 @@
+/* pages/API/voice/voice.wxss */
+image {
+  width: 75px;
+  height: 75px;
+}
+
+.page-body-wrapper {
+  justify-content: space-between;
+  flex-grow: 1;
+  margin-bottom: 150px;
+}
+.page-body-time {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.time-big {
+  font-size: 30px;
+  margin: 10px;
+}
+.time-small {
+  font-size: 15px;
+}
+
+.page-body-buttons {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-around;
+}
+.page-body-button {
+  width: 225px;
+  text-align: center;
+}
+.button-stop-record {
+  width: 15px;
+  height: 15px;
+  border: 10px solid #fff;
+  background-color: #f55c23;
+  border-radius: 115px;
+  margin: 0 auto;
+}