能力依赖

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.vueexport 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}

打完出工~