能力依賴

RecorderManager 全局唯一的錄音管理器

錄音功能的要求與限制

• 與當(dāng)前頁(yè)面其他 音頻播放/錄音 功能互斥
• 是否在錄音中狀態(tài)顯示
• 結(jié)束/不需要錄音時(shí)，回收 RecorderManager 對(duì)象

材料

Codeing（結(jié)果代碼直接看最后）

構(gòu)造一個(gè)簡(jiǎn)單的 DOM 結(jié)構(gòu)

@click="recordAction" :src=http://www.wxapp-union.com/"recordImg" class="record"/>

先實(shí)現(xiàn)小程序的錄音功能

import iconRecord from '../../static/images/icon_record.png'
import iconRecording from '../../static/images/icon_recording.png'
// ...
data() {
  recordImg: iconRecord, // 錄音按鈕的圖標(biāo)
  rm: null, // 錄音管理器
},
// ...
mounted() {
  if (this.rm === null) { // 錄音管理器如果沒有初始化就先初始化
    this.rm = uni.getRecorderManager()
  }
  // 綁定回調(diào)方法
  this.rm.onStart((e) => this.onStart(e))
  this.rm.onPause((e) => this.onPause(e))
  this.rm.onResume((e) => this.onResume(e))
  this.rm.onInterruptionBegin((e) => this.onInterruptionBegin(e))
  this.rm.onInterruptionEnd((e) => this.onInterruptionEnd(e))
  this.rm.onError((e) => this.onError(e))
},
// ...
methods: {
  // ...
  recordAction() {
    if (this.recordImg === iconRecord) {
      // 設(shè)置格式為MP3，最長(zhǎng)60S，采樣率22050
      this.rm.start({
        duration: 600000,
        format: 'mp3',
        sampleRate: 22050,
      })
      // 開始錄音后綁定停止錄音的回調(diào)方法
      this.rm.onStop((e) => this.onStop(e))
    } else if (this.recordImg === iconRecording) {
      this.rm.stop()
    },
  },
  onStart(e) {
    console.log('開始錄音', this.question, this.subQuesIndex)
    this.recordImg = iconRecording
    console.log(e)
  },
  onPause(e) {
    console.log(e)
    afterAudioRecord()
  },
  onResume(e) {
    console.log(e)
  },
  onStop(e) {
    console.log(e)
    this.recordImg = iconRecord
    // 結(jié)束錄音之后上傳錄音
    this.uploadMp3Action(e)
  },
  onInterruptionBegin(e) {
    console.log(e)
  },
  onInterruptionEnd(e) {
    console.log(e)
  },
  onError(e) {
    console.log(e)
  },
  uploadMp3Action(e) {
      // TODO uploadMp3
  },
},

只能同時(shí)有一個(gè)錄音，與音頻播放互斥

• globalData 中增加兩個(gè)屬性 audioPlaying ， audioRecording

// src/App.vue
export default {
  globalData: {  
    // 保證全局只有一個(gè)音頻處于播放狀態(tài)且錄音與播放操作互斥
    audioPlaying: false,
    audioRecording: false,
  },
  // ...
},

• Util 中增加判斷方法

// src/lib/Util.js
// 結(jié)束錄音之后釋放錄音能力
export function afterAudioRecord() {
  getApp().globalData.audioRecording = false
}
// 結(jié)束音頻播放之后釋放音頻播放能力
export function afterAudioPlay() {
  getApp().globalData.audioPlaying = false
}

/**
 * 判斷是否可以錄音或者播放
 * @param {string} type play | record
 */
export function beforeAudioRecordOrPlay(type) {
  const audioPlaying = getApp().globalData.audioPlaying
  const audioRecording = getApp().globalData.audioRecording
  if (audioPlaying ||audioRecording) {
    uni.showToast({
      title: audioPlaying ? '請(qǐng)先暫停其他音頻播放' : '請(qǐng)先結(jié)束其他錄音',
      icon: 'none'
    })
    return false
  } else {
    if (type === 'play') {
      getApp().globalData.audioPlaying = true
    } else if (type === 'record') {
      getApp().globalData.audioRecording = true
    } else {
      throw new Error('type Error', type)
    }
    return true
  }
}

• 改造原有 recordAction 方法

import { beforeAudioRecordOrPlay, afterAudioRecord} from '../../lib/Utils';
// ...
recordAction() {
-  if (this.recordImg === iconRecord) {
+  if (this.recordImg === iconRecord && beforeAudioRecordOrPlay('record')) {
    // 設(shè)置格式為MP3，最長(zhǎng)60S，采樣率22050
    this.rm.start({
      duration: 600000,
      format: 'mp3',
      sampleRate: 22050,
    })
    // 開始錄音后綁定停止錄音的回調(diào)方法
    this.rm.onStop((e) => this.onStop(e))
  } else if (this.recordImg === iconRecording) {
    this.rm.stop()
+   afterAudioRecord()
  },
},

這樣就避免了多次錄音

小程序錄音上傳

補(bǔ)全我們的 uploadMp3Action 方法，我們使用 uni-app 的 uni.uploadFile() 方法來上傳錄音文件

uploadMp3Action(e) {
  const filePath = e.tempFilePath
  const option = {
    url: 'xxx',
    filePath,
    header,
    formData: {
      filePath
    },
    name: 'audio',
  }
  uni.showLoading({
    title: '錄音上傳中...'
  })
  return await uni.uploadFile(option)
  uni.hideloading()
}

最后在頁(yè)面卸載的時(shí)候回收 RecorderManager 對(duì)象

beforeDestroy() {
  this.rm = null
}