uni-app小程序录音上传的解决方案

相关学习推荐：微信小程序开发

能力依赖

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: '录音上传中...'   })  await uni.uploadFile(option)   uni.hideloading() }复制代码

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

beforeDestroy() {  this.rm = null}复制代码

打完收工~

了解