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}複製程式碼

打完收工~

瞭解更多其他精品文章，敬請關注欄目~

以上就是uni-app小程式錄音上傳的解決方案的詳細內容，更多請關注TW511.COM其它相關文章！