JS實現一個微信錄音功能過程範例詳解

2023-02-24 06:02:00

功能原型圖

其實就是微信傳送語音的功能。沒有轉文字的功能。

拆解需求

根據原型圖可以很容易的得出我們需要做的內容包括下面三個部分：

接入微信的語音SDK
呼叫微信SDK的API邏輯
介面和互動的實現

其中第一點和第二點屬於業務邏輯部分，第三點屬於互動邏輯部分。對於業務邏輯和互動邏輯的關係在我的另外一篇文章描述過，我在vue中是這樣拆分元件的

從原型圖可以分析出如下的流程圖：

評估時間

第三事情是評估時間。在接到這個需求的時候，我們需要假設我們在此之前沒有接入過微信相關的SDK，並以此為前提進行工期的評估。

可以將該使用者故事拆分為如下任務：

微信語音SDK的技術調研（0.5天）
輸出開發設計檔案（0.5天）
接入微信語音SDK（0.5天）
編碼（1天）
自測（0.5天）

隨後將上面的時間都乘以2！ 自此才可以將估算的工期上報給產品。多年的經驗告訴自己，自己一開始估算的工期從來沒夠過。自行估算的時候，幻想的是在工作的時候能夠一直保持專注。

就我自己而言，做不到，上班不可能不摸魚！也是必須要摸魚的。乘以2才是剛夠而已。

程式碼實現

都說在實現程式碼之前要先設計，謀定而後動。我是這樣做的，先想好資料夾建立，然後到檔案的建立，再到具體檔案中寫出大體的框架。

需求並不複雜，只是一個介面中的一個模組。所以我只需要一個Record.vue來承載介面，一個use-record-layout.js來承載業務邏輯，以及一個use-record-interact.js來承接互動邏輯。

|__im-record
    |__Record.vue
    |__use-record-layout.js
    |__use-record-interact.js

為了便於說明，將這個聊天的介面簡化如下：

<script setup>
import { useNamespace } from "@/use-namespace";
const ns = useNamespace('chat')
</script>
<template>
  <header :class="ns.b('header')"></header>
  <main :class="ns.b('main')">
    <section :class="[ns.b('record'), ns.w('record', 'toast')]">
      <div :class="ns.w('record', 'speak')"></div>
      <div :class="ns.w('record', 'pause')"></div>
    </section>
  </main>
  <footer :class="ns.w('button', 'wrap')">
    <button :class="ns.b('button')">
      <span>
        按住 說話
      </span>
    </button>
  </footer>
</template>

通過上面的程式碼片段可知，我們的主要的介面在section標籤的record部分。

use-record-layout.js的主題程式碼如下：

  const recordStyle = {
    default: { }, // 預設樣式/確定傳送錄音
    recording: { }, // 錄音中
    pause: { }, // 暫停錄音
    cancel: { } // 取消錄音
  }
  const init = () => {
    initEvent()
    initStyle()
  }
  const initStyle = () => {
    recordStyle.default.is = true
  }
  const initEvent = () => {
    el.addEventListener('touchstart', handleTouchstart)
    el.addEventListener('touchmove', handleTouchmove)
    el.addEventListener('touchend', handleTouchend)
  }
  const axis = {
    posStart: 0, // 初始化起點座標
    posMove: 0 // 初始化滑動座標
  }
  const handleTouchstart = (event) => {
    event.preventDefault()
    axis.posStart = event.touches[0].pageY
    recordStyle.recording.is = true
  }
  const handleTouchmove = (event) => {
    event.preventDefault()
    axis.posMove = event.targetTouches[0].pageY
    const diffMove = axis.posMove - axis.posStart
    if (diffMove > DEFAULT_AXIS) {
      recordStyle.recording.is = true
    }
  }
  const handleTouchend = (event) => {
    event.preventDefault()
    recordStyle.default.is = true
  }
  init()

其中recordStyle是互動的結果，在這個需求當中，我們的介面的四種變化都對應其中一個的樣式。

use-record-interact.js也很簡單，註冊微信錄音功能 ➡️

const wx = 'wx'
const useRecordInteract = () => {
  const isAuth = localStorage.getItem('allowWxRecord')
  // 獲取錄音許可權
  const authRecord = () => {
    if (!isAuth) {
      wx.startRecord()
      return
    }
    return isAuth
  }
  // 停止錄音
  const stopRecord = () => {}
  // 上傳錄音
  const uploadRecord = () => {}
}

互動邏輯和業務邏輯的聯動通過recordStyle物件的存取屬性來實現,程式碼片段如下：

const interact = useRecordInteract()
const recordStyle = {
    default: {
      _is: false,
      get is() {
        return this._is
      },
      set is(value) {
        this._is = value
        if (value) {
          this.recording.is = false
          this.pause.is = false
          this.cancel.is = false
          interact.uploadRecord()
        }
      }
    },
    //...
}

實現了業務邏輯和互動邏輯的分離。

以上就是JS實現一個微信錄音功能過程範例詳解的詳細內容，更多關於JS微信錄音功能的資料請關注it145.com其它相關文章！

JS實現一個微信錄音功能過程範例詳解

目錄

功能原型圖

拆解需求

評估時間

程式碼實現

熱門文章