快捷導(dǎo)航

vue使用js-audio-recorder實(shí)現(xiàn)錄音功能

更新時間：2023年12月05日 11:36:33 作者：學(xué)而時習(xí)之不亦說乎。

這篇文章主要為大家詳細(xì)介紹了vue如何使用js-audio-recorder實(shí)現(xiàn)錄音功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前言

最近項(xiàng)目中需要實(shí)現(xiàn)一個錄音上傳功能，用于語音評論可以上錄音。

下載插件：

npm i js-audio-recorder

完整代碼

<template>
  <div style="padding: 20px;">
    <h3>錄音上傳</h3>
 
    <div style="font-size:14px">
      <h3>錄音時長：{{ recorder && recorder.duration.toFixed(4) }}</h3>
      <br />
      <el-button type="primary" @click="handleStart">開始錄音</el-button>
      <el-button type="info" @click="handlePause">暫停錄音</el-button>
      <el-button type="success" @click="handleResume">繼續(xù)錄音</el-button>
      <el-button type="warning" @click="handleStop">停止錄音</el-button>
      <br />
      <br />
      <h3>
        播放時長：{{
          recorder &&
            (playTime > recorder.duration
              ? recorder.duration.toFixed(4)
              : playTime.toFixed(4))
        }}
      </h3>
      <br />
      <el-button type="primary" @click="handlePlay">播放錄音</el-button>
      <el-button type="info" @click="handlePausePlay">暫停播放</el-button>
      <el-button type="success" @click="handleResumePlay">繼續(xù)播放</el-button>
      <el-button type="warning" @click="handleStopPlay">停止播放</el-button>
      <el-button type="error" @click="handleDestroy">銷毀錄音</el-button>
      <el-button type="primary" @click="uploadRecord">上傳</el-button>
    </div>
  </div>
</template>
 
<script>
import Recorder from 'js-audio-recorder'
 
export default {
  data() {
    return {
      recorder: null,
      playTime: 0,
      timer: null,
      src: null
    }
  },
  created() {
    this.recorder = new Recorder()
  },
  methods: {
    // 開始錄音
    handleStart() {
      this.recorder = new Recorder()
      Recorder.getPermission().then(() => {
        console.log('開始錄音')
        this.recorder.start() // 開始錄音
      }, (error) => {
        this.$message({
          message: '請先允許該網(wǎng)頁使用麥克風(fēng)',
          type: 'info'
        })
        console.log(`${error.name} : ${error.message}`)
      })
    },
    handlePause() {
      console.log('暫停錄音')
      this.recorder.pause() // 暫停錄音
    },
    handleResume() {
      console.log('恢復(fù)錄音')
      this.recorder.resume() // 恢復(fù)錄音
    },
    handleStop() {
      console.log('停止錄音')
      this.recorder.stop() // 停止錄音
    },
    handlePlay() {
      console.log('播放錄音')
      console.log(this.recorder)
      this.recorder.play() // 播放錄音
 
      // 播放時長
      this.timer = setInterval(() => {
        try {
          this.playTime = this.recorder.getPlayTime()
        } catch (error) {
          this.timer = null
        }
      }, 100)
    },
    handlePausePlay() {
      console.log('暫停播放')
      this.recorder.pausePlay() // 暫停播放
 
      // 播放時長
      this.playTime = this.recorder.getPlayTime()
      this.time = null
    },
    handleResumePlay() {
      console.log('恢復(fù)播放')
      this.recorder.resumePlay() // 恢復(fù)播放
 
      // 播放時長
      this.timer = setInterval(() => {
        try {
          this.playTime = this.recorder.getPlayTime()
        } catch (error) {
          this.timer = null
        }
      }, 100)
    },
    handleStopPlay() {
      console.log('停止播放')
      this.recorder.stopPlay() // 停止播放
 
      // 播放時長
      this.playTime = this.recorder.getPlayTime()
      this.timer = null
    },
    handleDestroy() {
      console.log('銷毀實(shí)例')
      this.recorder.destroy() // 毀實(shí)例
      this.timer = null
    },
    uploadRecord() {
      if (this.recorder == null || this.recorder.duration === 0) {
        this.$message({
          message: '請先錄音',
          type: 'error'
        })
        return false
      }
      this.recorder.pause() // 暫停錄音
      this.timer = null
      console.log('上傳錄音')// 上傳錄音
 
      const formData = new FormData()
      const blob = this.recorder.getWAVBlob()// 獲取wav格式音頻數(shù)據(jù)
      // 此處獲取到blob對象后需要設(shè)置fileName滿足當(dāng)前項(xiàng)目上傳需求，其它項(xiàng)目可直接傳把blob作為file塞入formData
      const newbolb = new Blob([blob], { type: 'audio/wav' })
      const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
      formData.append('file', fileOfBlob)
      const url = window.URL.createObjectURL(fileOfBlob)
      this.src = url
      // const axios = require('axios')
      // axios.post(url, formData).then(res => {
      //   console.log(res.data.data[0].url)
      // })
    }
  }
}
</script>

播放通過audio標(biāo)簽控制，可以上傳到公司服務(wù)器獲取線上地址，還可以通過blob對象獲取到播放url

  const blob = this.recorder.getWAVBlob()
  this.url = window.URL.createObjectURL(blob)

注意事項(xiàng)

注意，調(diào)試環(huán)境這里會報錯，所以開始解決報錯問題：

報錯：error:瀏覽器不支持getUserMedia !

其實(shí)這是因?yàn)闉g覽器不支持http：IP開頭的路徑，認(rèn)為這個路徑不安全

瀏覽器只支持file:,https:,http://localhost，

解決辦法：

chrome瀏覽器

地址欄輸入：chrome://flags/#unsafely-treat-insecure-origin-as-secure

輸入你的本地網(wǎng)址，改為enabled，選擇重啟瀏覽器按鈕【生產(chǎn)環(huán)境當(dāng)中由于是使用域名進(jìn)行訪問，所以就不會報錯?！?/p>

然后就OK了

總結(jié)

1.錄音時長duration是recorder的屬性，可以實(shí)時獲??；但播放時長需要通過方法getPlayTime()獲取，播放時不能實(shí)時改變，此處我用了個100ms延遲的定時器假裝實(shí)時獲取，如果有更好的辦法，歡迎指教。

2.getWAVBlob()獲取錄音數(shù)據(jù)的方法獲取的時blob對象，當(dāng)前項(xiàng)目中需要驗(yàn)證fileName，所以需要把blob轉(zhuǎn)成file，改變fileName上傳。

3.官網(wǎng)提供的demo中還有波形圖，可以參考。

官網(wǎng)地址：https://recorder-api.zhuyuntao.cn/

官網(wǎng)項(xiàng)目演示地址：https://recorder.zhuyuntao.cn/

更新

客戶說錄音文件太大，20s就有2M左右，需要壓縮。

查看文檔降低采樣位數(shù)，采樣率，單聲道可以降低音頻質(zhì)量，測試20s大概只有200k左右，只需獲取record對象時申明即可。

this.recorder = new Recorder({
                    sampleBits: 8, // 采樣位數(shù)，支持 8 或 16，默認(rèn)是16
                    sampleRate: 11025, // 采樣率，支持 11025、16000、22050、24000、44100、48000，根據(jù)瀏覽器默認(rèn)值，我的chrome是48000
                    numChannels: 1 // 聲道，支持 1 或 2， 默認(rèn)是1
                    // compiling: false,(0.x版本中生效,1.x增加中)  // 是否邊錄邊轉(zhuǎn)換，默認(rèn)是false
                })

到此這篇關(guān)于vue使用js-audio-recorder實(shí)現(xiàn)錄音功能的文章就介紹到這了,更多相關(guān)vue錄音內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: