feat: record-voice

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",

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();
+  }
+})

pages/API/voice/voice.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "录音"
+}

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>
+

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;
+}