H5實現移動端語音錄製功能

依舊優雅發表於2019-02-19
H5

前言：

年前做了一期語音口令的年度活動，從語音錄製、上傳到智慧檢測，以及後續的語音播放元件，語音錄製的實現的方式是基於微信的JSSDK，本篇主要把語音錄製板塊整理了一下，供大家參考；

下一篇-音訊元件

各位看官先上眼：

H5實現移動端語音錄製功能

功能梳理：

檢視層
  • 定義動態效果狀態標識
    區分幾種錄製狀態
isAudioState: 0 // 0 未錄製or檢測完畢 1 錄製中 2 檢測中
：未錄製or檢測完畢     / 0 無動效
：錄製中               / 1 波浪紋
：檢測中               / 2 環形檢測
複製程式碼
  • 設定動態效果切換狀態
    通過監聽touchstart/touchend事件去切換動態效果
複製程式碼
邏輯層
 錄製、上傳、檢測功能
 時間限制（時間區間）、內容為空的相容處理
複製程式碼
  • touchstart事件中做了哪些事
    1.開啟錄音
2.切換錄音中狀態
3.開始計時，用於記錄音訊時長
複製程式碼
  • touchend事件中做了哪些事
    1.停止錄音
2.智慧檢測
3.控制錄音時長
4.上傳音訊
5.切換錄音結束狀態（是否開始檢測）
複製程式碼
USE API（JS-SDK）
 開始錄製 startRecord
 停止錄製 stopRecord
 智慧檢測 translateVoice （將語音轉文字）
 上傳音訊 uploadVoice （將錄製的臨時音訊檔案上傳至微信服務，供服務）
複製程式碼

這裡就不贅述了，可以去貓一眼微信的官方文件 點選前往

程式碼層：

 注：所有邏輯均在此元件，父級元件引入即可
 
<template>
 <div>
   <div class="audio-img" @touchstart="audioStart" @touchend="audioEnd">
       <!-- 未錄製 -->
       <img src="data:image/png;base64,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" alt="">
      <!-- 錄製中 -->
       <div class="wave-wrap" v-show="isAudioState === 1">
         <div class="wave wave-1"></div>
         <div class="wave wave-2"></div>
         <div class="wave wave-3"></div>
       </div>
       <!-- 校驗中 -->
       <div class="roate-wrap" v-show="isAudioState === 2">
         <img src="data:image/png;base64,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" alt="">
       </div>
      </div>
      <!-- 狀態 -->
     <div class="audio-text">{{isAudioState === 0 ? '長按開始' : isAudioState === 1 ? '錄製中...' : '識別中...'}}</div>
 </div>
</template>

<script>
let vm = null
import _wx from '../../../static/wx.js' // JS-SDK
require('es6-promise').polyfill()
export default {
  data () {
    return {
      isAudioState: 0, // 0 未錄製or檢測完畢 1 錄製中 2 檢測中
      secondNum: 0 // 音訊時長
    }
  },
  filters: {
  },
  created: function () {
    vm = this
  },
  methods: {
    audioStart (e) {
      // 開始錄製
      e.preventDefault() // 解決touch時觸發下拉 鬆開後無法touchend的情況
      _wx.startRecord()
      this.count_time()
      this.isAudioState = 1
    },
    audioEnd () {
      // 結束錄製
      vm.isAudioState = 0
      clearInterval(this.setIvWrap)
      vm.isAudioState = 2 // 方便本地觀測 動態 測試通過後註釋即可
      var params = {
        async success (res) {
          this.limit_time() // 時間限制
          vm.isAudioState = 2 // 實際檢測動效
          const testdata = await vm.check_text(res)
          if (!testdata.translateResult) { // 未檢測語音
            console.log('人家沒聽明白你說啥，再讀一下')
            return
          }
          _wx.uploadVoice({
            localId: res.localId,
            isShowProgressTips: 0,
            success (updata) {
              console.log('上傳成功')
            }
          })
        }
      }
      _wx.stopRecord(params)
    },
    check_text (res) {
      // 智慧校驗
      return new Promise((resolve, reject) => {
        _wx.translateVoice({
          localId: res.localId,
          isShowProgressTips: 0,
          success (testdata) {
            resolve(testdata)
          }
        })
      })
    },
    count_time () {
      // 計算音訊時長
      clearInterval(this.setIvWrap)
      this.secondNum = 0
      this.setIvWrap = setInterval(() => {
        this.secondNum ++
        if (this.secondNum >= 15) {
          this.audioEnd()
        }
      }, 1000)
    },
    limit_time () {
      // 音訊時長限制
      if (vm.secondNum >= 15 || vm.secondNum <= 3) {
        console.log(vm.secondNum ? '最多錄製15s' : '錄製時長不得小於3s')
        return
      }
    }
  },
  mounted () {
  },
  components: {
  }
}
</script>

<style lang="scss">
img{ pointer-events: none; } // 取消某些瀏覽器的預設事件
.audio-img{
  width: 1.4rem;
  height: 1.4rem;
  margin: 0 auto;
  position: relative;
  img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .mark-image{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;height: 100%;
    z-index: 1;
  }
  .wave-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;height: 100%;
    z-index: 0;
    .wave{
      position: absolute;
      left: 1%;
      top: 1%;
      width: 98%;
      height: 98%;
      border-radius: 50%;
      z-index: 1;
    }
    .wave-1{ 
      background: #d6382f;
      animation: scale-wave1 2s linear infinite;    
    }
    .wave-2{
      background: #e37f6a;
      animation: scale-wave2 2s linear infinite;
    }
    .wave-3{ 
      background: #e37f6a;
      animation: scale-wave2 2s 1s linear infinite;    
    }
  }
  .roate-wrap{
    position: absolute;
    left: -0.21rem;
    top: -0.21rem;
    width: 100%;
    height: 100%;
    padding: 0.25rem;
    z-index: 0;
    animation: roate-test 2s linear infinite;
    -webkit-animation: roate-test 2s linear infinite;
  }
}
.audio-text{
  margin-top: 0.3rem;
  color: #fff;
  text-align: center;
}
@keyframes scale-wave1 {
  0%{
   opacity: 1;
   transform: scale(1)
  }
  100%{
    transform: scale(1.35);
    opacity: 0;
  }
}
@keyframes scale-wave2 {
  0%{
    opacity: 1;
    transform: scale(1)
  }
  100%{
    opacity: 0;
    transform: scale(1.9)
  }
}

@keyframes roate-test {
  0%{
   transform: rotate(0);
  }
  100%{
   transform: rotate(360deg);
  }
}
</style>
複製程式碼

注意事項：

  • 上述邏輯中均為同步操作，以應對服務端非同步獲取當次錄音的音訊檔案（目的在於需確報本次音訊上傳成功後再與服務端互動）；
  • 微信音訊格式為speex，需轉格；
  • 部分瀏覽器存在touch img呈現預覽模式的解決方案，img{ pointer-events: none; }；
  • audioStart時，部分瀏覽器存在使用者同時觸發下拉動作後鬆手無法touchend的情況，需preventDefault操作;
  • 米8在觸發上傳、檢測api時，會造成檢測動畫的卡頓，（其他機型沒問題），初步懷疑是執行緒阻塞，有興趣的可以一塊研究一下~(方案：動畫軌跡被阻塞/dom渲染被打斷（gif），所以回撥後，可以使用時間戳的方式重新繪製圖片；其他類似場景也可以使用這種方案，當然針對性場景，具體情況還要重新定義~)

服務端針對微信speek格式音訊優化

針對微信的speex高清音訊格式，服務端的小可愛做了以下處理； 處理音訊為前端可識別格式wav，並轉格為mp3，並再次壓縮；友好前端格式、提高的效率的同時又極大的節約了成本；有興趣的同學可以去看一下， 作者：purewater2014，微信高清音訊處理連結。

結語：

本篇簡要概述了H5語音的錄製模組，下一篇說一下本次活動中，類微信語音列表的render方式元件的實現；感謝，不當之處歡迎指正交流~

相關文章