Vue如何使用js-audio-recorder插件實現(xiàn)錄音功能并將文件轉(zhuǎn)成wav上傳

更新時間：2025年06月03日 11:02:05 作者：張呵呵490

這篇文章主要給大家介紹了關(guān)于Vue如何使用js-audio-recorder插件實現(xiàn)錄音功能并將文件轉(zhuǎn)成wav上傳的相關(guān)資料,文中通過示例代碼講解了彈窗界面、變量控制、錄音啟動與停止、波形可視化、文件上傳及WAV格式獲取的完整流程,需要的朋友可以參考下

1.安裝js-audio-recorder插件并引入

npm i js-audio-recorder
import Recorder from "js-audio-recorder";   // 錄音插件

2.頁面錄音彈窗

<div class="voiceCss" v-if='voiceShow'>
  <div class="voiceButton"> 
     <el-button class="buttonCss" type="primary">
        <span v-if="voiceObj.type" @click="voiceType('start')">開始錄制</span>
        <span v-else @click="voiceType('end')">結(jié)束錄制</span>
     </el-button>
  </div>
  <div class="voiceCanvas">
     <h3>錄音時長：{{ recorder.duration.toFixed(4) }}</h3>
     <div style="width:100%;height:200px;border:1px solid red;margin-top: 5px;">
        <canvas id="canvas" style="width: 100%;height: 100%;"></canvas>
     </div>
  </div>
</div>

3.變量

data() {
    return {
      voiceShow: false,  // 錄音彈窗是否顯示
      voiceObj:{
        type:true,   // true-開始錄音  false-結(jié)束錄音
        state:true,  // true-恢復錄音  false-暫停錄音
      },
      recorder: new Recorder({
        sampleBits: 16,    // 采樣位數(shù)，支持 8 或 16，默認是16
        sampleRate: 16000, // 采樣率，支持 11025、16000、22050、24000、44100、48000，根據(jù)瀏覽器默認值，我的chrome是48000
        numChannels: 1,   // 聲道，支持 1 或 2， 默認是1
        // compiling: false,(0.x版本中生效,1.x增加中)  // 是否邊錄邊轉(zhuǎn)換，默認是false
     }),
     //波浪圖-錄音
     drawRecordId:null,
     oCanvas : null,
     ctx : null,
  }
}

4.打開錄音面板

voiceFun(){
  // 打開錄音彈窗
  this.voiceShow = true;
  // 初始化按鈕狀態(tài)(開始錄制/結(jié)束錄制)
  this.voiceObj = {
    type:true,
    state:true,
  };
  setTimeout(()=>{
  	// 錄音波浪元素
    this.oCanvas = document.getElementById('canvas');
    this.ctx = this.oCanvas.getContext("2d");
  },100)
},

5.開始結(jié)束錄音

voiceType(index){
  if(index=='start'){  // 開始錄音
    let that = this;
    Recorder.getPermission().then(
      () => {
        // console.log("開始錄音");
        that.recorder.start(); // 開始錄音
        that.drawRecord();  //開始繪制圖片
        that.voiceObj.type = false;
      },
      (error) => {
        that.$message({
          message: "請先允許該網(wǎng)頁使用麥克風",
          type: "info",
        });
        console.log(`${error.name} : ${error.message}`);
      }
    );
  }else if(index=='end') {  // 結(jié)束錄音
     this.recorder.stop();
     this.voiceObj.type = true;
     // 獲取錄音文件
     // this.getVoiceWAV();
     // 上傳錄音文件
     this.uploadvoiceWAV();
  }
},

6.繪制波浪圖

drawRecord () {
  // 用requestAnimationFrame穩(wěn)定60fps繪制
  this.drawRecordId = requestAnimationFrame(this.drawRecord);
  // 實時獲取音頻大小數(shù)據(jù)
  let dataArray = this.recorder.getRecordAnalyseData(),
      bufferLength = dataArray.length;
  // 填充背景色
  this.ctx.fillStyle = 'rgb(200, 200, 200)';
  this.ctx.fillRect(0, 0, this.oCanvas.width, this.oCanvas.height);
  // 設定波形繪制顏色
  this.ctx.lineWidth = 2;
  this.ctx.strokeStyle = 'rgb(0, 0, 0)';
  this.ctx.beginPath();
  var sliceWidth = this.oCanvas.width * 1.0 / bufferLength, // 一個點占多少位置，共有bufferLength個點要繪制
  x = 0;          // 繪制點的x軸位置
  for (var i = 0; i < bufferLength; i++) {
    var v = dataArray[i] / 128.0;
    var y = v * this.oCanvas.height / 2;
    if (i === 0) {
      // 第一個點
      this.ctx.moveTo(x, y);
    } else {
      // 剩余的點
      this.ctx.lineTo(x, y);
    }
    // 依次平移，繪制所有點
    x += sliceWidth;
  }
  this.ctx.lineTo(this.oCanvas.width, this.oCanvas.height / 2);
  this.ctx.stroke();
},

7.上傳錄音文件

uploadvoiceWAV(){
  let dom = document.querySelector(".voiceBox")
  const loading = this.$loading({
    lock: true,
    target: dom,
    text: '請稍等，正在語音轉(zhuǎn)文字',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  let wavBlob = this.recorder.getWAVBlob();
  // 創(chuàng)建一個formData對象
  var formData = new FormData()
  // 此處獲取到blob對象后需要設置fileName滿足當前項目上傳需求，其它項目可直接傳把blob作為file塞入formData
  const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
  //獲取當時時間戳作為文件名
  const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
  formData.append('file', fileOfBlob)
  uploadWavData(formData).then((response) => {  // uploadWavData替換成自己的接口引入
    loading.close();
    if(response.code==200){
       this.voiceShow = false;
       // 上傳成功，并轉(zhuǎn)文字
    }else if(response.code==500){
      this.$message({
        message: response.msg+"請重試",
        type: "error",
      });
    }
  });
},

8.獲取錄音文件(WAV)

getVoiceWAV(){
  let wavBlob = this.recorder.getWAVBlob();
  console.log(wavBlob);
},

總結(jié)

到此這篇關(guān)于Vue如何使用js-audio-recorder插件實現(xiàn)錄音功能并將文件轉(zhuǎn)成wav上傳的文章就介紹到這了,更多相關(guān)Vue錄音并將文件轉(zhuǎn)成wav上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: