首先安裝?npm install recorder-core

以下錄音組件完整代碼可復(fù)用

<template>
  <div>
    <div>
      <img
        v-if="!isSound"
        src="@/assets/images/mobile/mobileDoWork/answer_question_voice_icon.png"
        alt=""
        @click="recStart"
      />
      <div
        v-else
        class="flexCenter"
        style="padding-top: 1px;color:#707070;cursor: pointer;"
        @click="recStop"
      >
        <img
          style="width:24px;height:24px;margin:0 5px 0 0;"
          src="@/assets/images/mobile/mobileDoWork/answer_question_voice_pause_icon.png"
          alt=""
        />
        暫停錄音
      </div>
      <span v-if="!isSound">語(yǔ)音</span>
      <!--<button @click="recPlay">本地試聽(tīng)</button> -->
    </div>
    <div>
      <div
        v-show="isSound"
        style="padding-top: 6px"
      >
        <!-- 波形繪制區(qū)域 -->
        <div style="
            border: 1px solid #ccc;
            display: inline-block;
            vertical-align: bottom;
            border-radius: 80px;
            padding: 0 10px;
          ">
          <div
            ref="recwave"
            style="height: 40px; width: 248px"
          />
        </div>
      </div>
      <!-- <audio v-if="localUrl && !isSound" :src="localUrl" controls /> -->
    </div>
  </div>
</template>
<script>
// 引用后臺(tái)上傳接口
import upload from '@/api/upload.js'

import Recorder from 'recorder-core'

// 引入mp3格式支持文件；如果需要多個(gè)格式支持，把這些格式的編碼引擎js文件放到后面統(tǒng)統(tǒng)引入進(jìn)來(lái)即可
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
// 錄制wav格式的用這一句就行
import 'recorder-core/src/engine/wav'

// 可選的插件支持項(xiàng)，這個(gè)是波形可視化插件
import 'recorder-core/src/extensions/waveview'

export default {
  name: 'sound',
  components: {},
  props: {},
  data () {
    return {
      localUrl: '', // 本地試聽(tīng)錄音文件
      isSound: false, // 是否錄制完成
      isStop: false // 是否停止錄制
    }
  },
  watch: {},
  computed: {},
  mounted () { },
  methods: {
    // 開始錄音
    recStart () {
      this.isSound = true
      // 創(chuàng)建錄音對(duì)象
      this.rec = Recorder({
        type: 'wav', // 錄音格式，可以換成wav等其他格式
        sampleRate: 16000, // 錄音的采樣率，越大細(xì)節(jié)越豐富越細(xì)膩
        bitRate: 16, // 錄音的比特率，越大音質(zhì)越好
        onProcess: (
          buffers,
          powerLevel,
          bufferDuration,
          bufferSampleRate,
          newBufferIdx,
          asyncEnd
        ) => {
          // 錄音實(shí)時(shí)回調(diào)，大約1秒調(diào)用12次本回調(diào)
          // 可實(shí)時(shí)繪制波形，實(shí)時(shí)上傳（發(fā)送）數(shù)據(jù)
          if (this.wave) {
            this.wave.input(
              buffers[buffers.length - 1],
              powerLevel,
              bufferSampleRate
            )
          }
        }
      })

      // 打開錄音，獲得權(quán)限
      this.rec.open(
        () => {
          console.log('錄音已打開')
          if (this.$refs.recwave) {
            // 創(chuàng)建音頻可視化圖形繪制對(duì)象
            this.wave = Recorder.WaveView({ elem: this.$refs.recwave })
          }
          this.rec.start()
          this.$toast({
            message: '已開始錄音',
            type: 'success'
          })
        },
        (msg, isUserNotAllow) => {
          // 用戶拒絕了錄音權(quán)限，或者瀏覽器不支持錄音
          this.isSound = false
          this.$toast({
            message: (isUserNotAllow ? 'UserNotAllow，' : '') + msg,
            type: 'fail'
          })
        }
      )
      if (!this.rec) {
        this.isSound = false
        this.$toast({
          message: '未打開錄音',
          type: 'fail'
        })
        return
      }
    },
    // 結(jié)束錄音
    recStop () {
      // 控制頻繁點(diǎn)擊暫停錄制按鈕導(dǎo)致報(bào)錯(cuò)問(wèn)題
      if (this.isStop) {
        return
      }
      if (!this.rec) {
        this.isSound = false
        this.$toast({
          message: '未打開錄音',
          type: 'fail'
        })
        return
      }
      // envInLast 錄制結(jié)束時(shí)間   envInFirst 錄制開始時(shí)間
      var time = this.rec.envInLast - this.rec.envInFirst
      console.log('sound 【共錄制time:', time, 'ms】')
      // 獲取錄制時(shí)間 需求至少錄制三秒
      if (time < 3000) {
        this.$toast({
          message: '至少錄制三秒',
          type: 'fail'
        })
        return
      } else {
        this.$toast.clear()
        this.isStop = true
      }
      this.rec.stop(
        (blob, duration) => {
          this.$emit('loadingTrue')
          // blob就是我們要的錄音文件對(duì)象，可以上傳，或者本地播放
          this.recBlob = blob
          // 簡(jiǎn)單利用URL生成本地文件地址，此地址只能本地使用，比如賦值給audio.src進(jìn)行播放，賦值給a.href然后a.click()進(jìn)行下載（a需提供download="xxx.mp3"屬性）
          this.localUrl = URL.createObjectURL(blob)
          console.log('錄音成功blob', blob)
          // console.log('localUrl', this.localUrl)
          console.log('時(shí)長(zhǎng):' + duration + 'ms')

          this.upload(blob, this.localUrl) // 把blob文件上傳到服務(wù)器（請(qǐng)求后臺(tái)接口）
        },
        (err) => {
          console.error('結(jié)束錄音出錯(cuò)：' + err)
          this.isSound = false
          this.$toast({
            message: '結(jié)束錄音出錯(cuò)：' + err,
            type: 'fail'
          })
          this.reset('now')
        }
      )
    },
    // 上傳錄音
    upload (blob, localUrl) {
      var params = new FormData()
      params.append('file', blob)
      params.append('token', decodeURIComponent(JSON.parse(window.localStorage.getItem('token')).value))
      // 請(qǐng)求后臺(tái)上傳接口
      upload
        .upload(params)
        .then((res) => {
          console.log('data', res.data)
          var obj = {
            voice_url: res.data.url,
            voice_duration: res.data.time
          }
          // 給父頁(yè)面?zhèn)髦?頁(yè)面賦值
          this.$emit('onMenu', 1, obj)
          this.isSound = false
          this.$emit('loadingFalse')
          this.reset('now')
        })
        .catch((err) => {
          this.isSound = false
          this.$emit('loadingFalse')
          this.$toast({
            message: '語(yǔ)音上傳失敗' + err.message,
            type: 'fail'
          })
          this.reset('now')
        })
    },
    // 本地試聽(tīng)
    recPlay () {
      // 本地播放錄音試聽(tīng)，可以直接用URL把blob轉(zhuǎn)換成本地播放地址，用audio進(jìn)行播放
      var localUrl = URL.createObjectURL(this.recBlob)
      var audio = document.createElement('audio')
      audio.controls = true
      document.body.appendChild(audio)
      audio.src = localUrl
      audio.play() // 這樣就能播放了

      // 注意不用了時(shí)需要revokeObjectURL，否則霸占內(nèi)存
      setTimeout(function () {
        URL.revokeObjectURL(audio.src)
      }, 5000)
    },
    // 重置
    reset (type) {
      // 當(dāng)在錄音時(shí) 如頁(yè)面退出需重置否則再次進(jìn)入頁(yè)面錄音會(huì)報(bào)錯(cuò)（同時(shí)清除toast提示）
      if (!type) {
        this.$toast.clear()
      }
      if (this.rec) {
        this.rec.close() // 關(guān)閉錄音，釋放錄音資源，當(dāng)然可以不釋放，后面可以連續(xù)調(diào)用start
        this.rec = null
        this.isStop = false
        this.isSound = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
i {
  color: #707070;
  font-size: 26px;
}
img {
  width: 27px;
  height: 27px;
  cursor: pointer;
  margin-bottom: 2px;
}
</style>

父頁(yè)面引用該組件：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-843367.html

<template>
  <div class="upload_media_box">
    <Sound
      ref="sound"
    />
  </div>
</template>

<script>
import Sound from '@/components/sound'
export default {
  components: {
    Sound
  },
  methods: {
    // 停止錄音
    resetSound () {
      this.$nextTick(() => {
        this.$refs.sound.reset()
      })
    },
  },
}
</script>

到了這里，關(guān)于VUE pc端+移動(dòng)端上傳錄音并上傳(recorder-core)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！