微信小程序如何實(shí)現(xiàn)錄音功能

data數(shù)據(jù)

data:{
  playerState: 0, //0-錄音  1-播放
  voice: "", //錄音地址
  voiceType: false, //錄音切換
  beginAndEnd: "請語音錄入",
}
image.png
image.png
image.png
image.png

開始錄音

tape() {
    if (this.data.playerState == 0) { //等于0,進(jìn)行錄音功能
      //正在錄音點(diǎn)擊后就結(jié)束錄音,圖標(biāo)也該為播放圖標(biāo),功能改為播放
      if (this.data.voiceType) { 
        //結(jié)束錄音
        this.setData({
          voiceType: false,
          src: '/assets/imgs/player.png'
        })
        this.end() //調(diào)用結(jié)束錄音的方法
      } else {
        //開始錄音
        this.setData({
          src: '/assets/imgs/voiceEnd.png',
          beginAndEnd: "結(jié)束語音錄入",
          voiceType: true
        })
        wx.showToast({
          title: '正在錄音。。。',
          icon: 'none',
          duration: 60000
        })
        const options = {
          duration: 60000, //錄音的時長
          sampleRate: 44100, //采樣率
          numberOfChannels: 1, //錄音通道數(shù)
          encodeBitRate: 192000, //編碼碼率,有效值見下表格
          format: 'wav', //音頻格式
          frameSize: 50 //指定幀大小,單位 KB。傳入 frameSize 后,每錄制指定幀大小的內(nèi)容后,會回調(diào)錄制的文件內(nèi)容,不指定則不會回調(diào)。暫僅支持 mp3 格式。
        }
        wx.getRecorderManager().start(options) //開始錄音
        var num = 0
        this.data.interval = setInterval(() => { //限時錄音60s
          num++
          if (num > 59) { //到60s調(diào)用停止錄音方法
            this.end()
          }
        }, 1000)
      }
    } else { //不等0也就是1,進(jìn)行播放
      if (this.data.voiceType) {
        this.setData({
          voiceType: false,
          src: '/assets/imgs/player.png',
          beginAndEnd: "播放錄音"
        })
        innerAudioContext.stop() //停止。停止后的音頻再播放會從頭開始播放。
      } else {
        this.setData({
          voiceType: true,
          src: '/assets/imgs/stop.png',
          beginAndEnd: "停止播放"
        })
        //音頻的數(shù)據(jù)鏈接,用于直接播放,僅支持絕對路徑。
        innerAudioContext.src = this.data.voice 
        innerAudioContext.play() //播放
        innerAudioContext.onEnded(() => { //監(jiān)聽音頻自然播放至結(jié)束的事件
          innerAudioContext.stop() //停止。
          this.setData({
            voiceType: false,
            src: '/assets/imgs/player.png',
            beginAndEnd: "播放錄音"
          })
        })
      }
    }
  },

結(jié)束錄音

//結(jié)束錄音
  end() {
    clearInterval(this.data.interval) //清除定時器
    wx.hideToast() //隱藏正則錄音的圖標(biāo)
    wx.showToast({
      title: '錄音結(jié)束。。。',
      icon: 'none',
      duration: 2000
    })
    this.setData({
      beginAndEnd: "播放語音",
      playerState: 1,
      voiceType: false
    })
    var that = this
    //監(jiān)聽錄音結(jié)束事件
    wx.getRecorderManager().onStop(res => { 
      console.log(res)
      //調(diào)用自定義事件,把音頻上傳并返回音頻路徑
      const {
        uploadRecord
      } = require('../../../http/picture.js')
      uploadRecord(res.tempFilePath).then(res => {
        console.log(res)
        that.setData({
          voice: JSON.parse(res).data,
          state: 1
        })
      })
    })
    wx.getRecorderManager().stop() //停止錄音
  },
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容