关于uni-app:uniapp小程序录音上传解决方案后续更新Taro版

能力依赖

RecorderManager 全局惟一的录音管理器

录音性能的要求与限度

• 与以后页面其余 音频播放 / 录音 性能互斥
• 是否在录音中状态显示
• 完结 / 不须要录音时，回收 RecorderManager 对象

资料

能够 / 完结 录音
录音中

Codeing（后果代码间接看最初）

结构一个简略的 DOM 构造

<image @click="recordAction" :src="recordImg" class="record"/>

先实现小程序的录音性能

import iconRecord from '../../static/images/icon_record.png'
import iconRecording from '../../static/images/icon_recording.png'
// ...
data() {
  recordImg: iconRecord, // 录音按钮的图标
  rm: null, // 录音管理器
},
// ...
mounted() {if (this.rm === null) { // 录音管理器如果没有初始化就先初始化
    this.rm = uni.getRecorderManager()}
  // 绑定回调办法
  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) {
      // 设置格局为 MP3，最长 60S，采样率 22050
      this.rm.start({
        duration: 600000,
        format: 'mp3',
        sampleRate: 22050,
      })
      // 开始录音后绑定进行录音的回调办法
      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
    // 完结录音之后上传录音
    this.uploadMp3Action(e)
  },
  onInterruptionBegin(e) {console.log(e)
  },
  onInterruptionEnd(e) {console.log(e)
  },
  onError(e) {console.log(e)
  },
  uploadMp3Action(e) {// TODO uploadMp3},
},

只能同时有一个录音，与音频播放互斥

• globalData中减少两个属性audioPlaying，audioRecording

// src/App.vue
export default {
  globalData: {  
    // 保障全局只有一个音频处于播放状态且录音与播放操作互斥
    audioPlaying: false,
    audioRecording: false,
  },
  // ...
}, 

• Util中减少判断办法

// src/lib/Util.js
// 完结录音之后开释录音能力
export function afterAudioRecord() {getApp().globalData.audioRecording = false
}
// 完结音频播放之后开释音频播放能力
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 ? '请先暂停其余音频播放' : '请先完结其余录音',
      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')) {
    // 设置格局为 MP3，最长 60S，采样率 22050
    this.rm.start({
      duration: 600000,
      format: 'mp3',
      sampleRate: 22050,
    })
    // 开始录音后绑定进行录音的回调办法
    this.rm.onStop((e) => this.onStop(e))
  } else if (this.recordImg === iconRecording) {this.rm.stop()
+   afterAudioRecord()},
},

这样就防止了屡次录音

小程序录音上传

补全咱们的 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()}

最初在页面卸载的时候回收 RecorderManager 对象

beforeDestroy() {this.rm = null}

打完出工~