相關(guān)學(xué)習(xí)推薦：微信小程序開(kāi)發(fā)

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供安順網(wǎng)站建設(shè)、安順做網(wǎng)站、安順網(wǎng)站設(shè)計(jì)、安順網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、安順企業(yè)網(wǎng)站模板建站服務(wù)，十年安順做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

能力依賴

RecorderManager 全局唯一的錄音管理器

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

可以/結(jié)束 錄音 錄音中

Codeing（結(jié)果代碼直接看最后）構(gòu)造一個(gè)簡(jiǎn)單的DOM結(jié)構(gòu)

<image @click="recordAction" :src="recordImg" class="record"/>復(fù)制代碼

先實(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) { // 錄音管理器如果沒(méi)有初始化就先初始化
    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,
      })      // 開(kāi)始錄音后綁定停止錄音的回調(diào)方法
      this.rm.onStop((e) => this.onStop(e))
    } else if (this.recordImg === iconRecording) {      this.rm.stop()
    },
  },
  onStart(e) {    console.log('開(kāi)始錄音', 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
  },
},復(fù)制代碼

只能同時(shí)有一個(gè)錄音，與音頻播放互斥globalData中增加兩個(gè)屬性audioPlaying，audioRecording

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

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
  }
}復(fù)制代碼

改造原有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,
    })    // 開(kāi)始錄音后綁定停止錄音的回調(diào)方法
    this.rm.onStop((e) => this.onStop(e))
  } else if (this.recordImg === iconRecording) {    this.rm.stop()
+   afterAudioRecord()
  },
},復(fù)制代碼

這樣就避免了多次錄音

小程序錄音上傳

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

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()
}復(fù)制代碼

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

beforeDestroy() {  this.rm = null}復(fù)制代碼

打完收工~

了解更多其他精品文章，敬請(qǐng)關(guān)注uni-app欄目~

網(wǎng)站題目：uni-app小程序錄音上傳的解決方案
網(wǎng)站URL：http://vcdvsql.cn/article20/cphhjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化、商城網(wǎng)站、全網(wǎng)營(yíng)銷推廣、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)