一、實現(xiàn)效果

開始錄音dom.png

錄音中.png

二、實現(xiàn)過程

recorder-js文檔
1 安裝插件
npm install recorder-js --save

2 dom：音量圖標(biāo)+錄音進度條+錄音計時+開始及保存錄音按鈕，代碼如下

<div class="iconfont icon-sound"></div>
<el-progress :show-text="false" :stroke-width="5" :percentage="Recordingtage"  color="#2E70ED">
</el-progress>
<div class="time-text">{{Recordingtime}}</div>
<el-button class="record-btn" @click="startRecording">{{Recordingbtn}}</el-button>

3 事件及方法：獲取設(shè)備及音頻開始錄音；開始時間為0:00，定時器開始計時 ，進度條進度增長，當(dāng)前設(shè)置最高時長為18分鐘，詳細(xì)代碼如下

import Recorder from "recorder-js";    // 引入錄音插件
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const recorder = new Recorder(audioContext, {
  // An array of 255 Numbers
  // You can use this to visualize the audio stream
  // If you use react, check out react-wave-stream
  onAnalysed: data => {
    // console.log("recorder data",data)
  }
});

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => recorder.init(stream)).catch(err => console.log("Uh oh... unable to get stream...", err));
//載入這段dom的時候調(diào)用，獲取設(shè)備及權(quán)限

recorder.start().then(() => {
  this.Recordingbtn = "保存錄音";     //開始錄音后按鈕文字變化
  this.Recordingnum = 0;
  this.Recordingtime = "0:00";
  this.Recordingtage = 0;
  this.Recordingint = window.setInterval(function() {
    this.Recordingnum++;
    this.Recordingtime =
      parseInt(this.Recordingnum / 60) +
      ":" +
      (this.Recordingnum % 60 < 10
      ? "0" + (this.Recordingnum % 60)
      : this.Recordingnum % 60);
      this.Recordingtage = parseFloat((self.Recordingnum / 18).toFixed(2));
  }, 1000);  //計時換算
});  //開始錄音流程

window.clearInterval(this.Recordingint);    //錄音完成清除定時
recorder.stop().then(({ blob, buffer }) => {
    this.Recordingbtn = "開始錄音";    //停止錄音后按鈕文字變化
     blob = blob;
     let formData = new FormData();
     formData.append("type", "20");
     formData.append("file", blob, "file.wav");
     this.loading3 = true;
     this.loading3t = "音頻上傳中，請稍后";
/* //此處調(diào)用接口（參數(shù)為formData）保存錄音并返回一個audioUrl，用以本地播放 //  */
Recorder.download(blob, 'my-audio-file');  //將音頻文件下載到本地

//聽錄音
this.loading2 = true;
let  audiodom = document.getElementById("audio");
audiodom.src = window.SITE_CONFIG["baseUrl"] + row.audioUrl;
audio.addEventListener(
   "loadeddata",
   function() {
      audiodom.controls = "controls";
      this.loading2 = false;
      // audiodom.play();//開始播放
   },
   false
);  //聽錄音方法

以下是各方法調(diào)用解析

錄音方法調(diào)用解析圖.png