安裝 js-audio-recorder

<template>
  <div class="home" style="margin:1vw;">
    <el-button type="success" @click="getPermission()" style="margin:1vw;">獲取麥克風許可權</el-button>
    <br/>
    <el-button type="info" @click="startRecorder()"  style="margin:1vw;">開始錄音</el-button>
    <el-button type="info" @click="resumeRecorder()" style="margin:1vw;">繼續錄音</el-button>
    <el-button type="info" @click="pauseRecorder()" style="margin:1vw;">暫停錄音</el-button>
    <el-button type="info" @click="stopRecorder()" style="margin:1vw;">結束錄音</el-button>
    <br/>
    <el-button type="success" @click="playRecorder()" style="margin:1vw;">錄音播放</el-button>
    <el-button type="success" @click="pausePlayRecorder()" style="margin:1vw;">暫停錄音播放</el-button>
    <el-button type="success" @click="resumePlayRecorder()" style="margin:1vw;">恢復錄音播放</el-button>
    <el-button type="success" @click="stopPlayRecorder()" style="margin:1vw;">停止錄音播放</el-button>
    <br/>
    <el-button type="info" @click="getRecorder()" style="margin:1vw;">獲取錄音資訊</el-button>
    <el-button type="info" @click="downPCM()" style="margin:1vw;">下載PCM</el-button>
    <el-button type="info" @click="downWAV()" style="margin:1vw;">下載WAV</el-button>
    <el-button type="info" @click="getMp3Data()" style="margin:1vw;">下載MP3</el-button>
    <br/>
    <el-button type="error" @click="destroyRecorder()" style="margin:1vw;">銷燬錄音</el-button>
  </div>
</template>

<script>
import Recorder from 'js-audio-recorder'
const lamejs = require('lamejs')
const recorder = new Recorder({
  sampleBits: 16,                 // 取樣位數，支援 8 或 16，預設是16
  sampleRate: 48000,              // 取樣率，支援 11025、16000、22050、24000、44100、48000，根據瀏覽器預設值，我的chrome是48000
  numChannels: 1,                 // 聲道，支援 1 或 2， 預設是1
  // compiling: false,(0.x版本中生效,1.x增加中)  // 是否邊錄邊轉換，預設是false
})
 
// 繫結事件-列印的是當前錄音資料
recorder.onprogress = function(params) {
  console.log('--------------START---------------')
  console.log('錄音時長(秒)', params.duration);
  console.log('錄音大小(位元組)', params.fileSize);
  console.log('錄音音量百分比(%)', params.vol);
  console.log('當前錄音的總資料([DataView, DataView...])', params.data);

  console.log('--------------END---------------')
}
export default {
  name: 'home',
  methods: {
    /**
     *  錄音的具體操作功能
     * */
    // 開始錄音
    startRecorder () {
      recorder.start().then(() => {

      }, (error) => {
        // 出錯了
        console.log(`${error.name} : ${error.message}`)
      })
    },
    // 繼續錄音
    resumeRecorder () {
      recorder.resume()
    },
    // 暫停錄音
    pauseRecorder () {
      recorder.pause()
    },
    // 結束錄音
    stopRecorder () {
      recorder.stop()
    },
    // 錄音播放
    playRecorder () {
      recorder.play()
    },
    // 暫停錄音播放
    pausePlayRecorder () {
      recorder.pausePlay()
    },
    // 恢復錄音播放
    resumePlayRecorder () {
      recorder.resumePlay()
    },
    // 停止錄音播放
    stopPlayRecorder () {
      recorder.stopPlay()
    },
    // 銷燬錄音
    destroyRecorder () {
      recorder.destroy().then(function() {
        recorder = null
      })
    },
    /**
     *  獲取錄音檔案
     * */
    getRecorder(){
      let toltime = recorder.duration;//錄音總時長
      let fileSize = recorder.fileSize;//錄音總大小

      //錄音結束，獲取取錄音資料
      let PCMBlob = recorder.getPCMBlob();//獲取 PCM 資料
      let wav = recorder.getWAVBlob();//獲取 WAV 資料

      let channel = recorder.getChannelData();//獲取左聲道和右聲道音訊資料
    },
    /**
     *  下載錄音檔案
     * */
    //下載pcm
    downPCM () {
      //這裡傳參進去的時檔名
      recorder.downloadPCM('新檔案');
    },
    //下載wav
    downWAV () {
      //這裡傳參進去的時檔名
      recorder.downloadWAV('新檔案');
    },
    /**
     *  獲取麥克風許可權
     * */
    getPermission () {
      Recorder.getPermission().then(() => {
        this.$Message.success('獲取許可權成功')
      }, (error) => {
        console.log(`${error.name} : ${error.message}`);
      });
    },
    /**
     * 檔案格式轉換 wav-map3
     * */
    getMp3Data () {
      const mp3Blob = this.convertToMp3(recorder.getWAV());
      recorder.download(mp3Blob, 'recorder', 'mp3');
    },
    convertToMp3(wavDataView) {
      // 獲取wav頭資訊
      const wav = lamejs.WavHeader.readHeader(wavDataView) // 此處其實可以不用去讀wav頭資訊，畢竟有對應的config配置
      const { channels, sampleRate } = wav
      const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128)
      // 獲取左右通道資料
      const result = recorder.getChannelData()
      const buffer = []

      const leftData = result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2)
      const rightData = result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2)
      const remaining = leftData.length + (rightData ? rightData.length : 0)

      const maxSamples = 1152
      for (let i = 0; i < remaining; i += maxSamples) {
        const left = leftData.subarray(i, i + maxSamples)
        let right = null;
        let mp3buf = null;

        if (channels === 2) {
          right = rightData.subarray(i, i + maxSamples)
          mp3buf = mp3enc.encodeBuffer(left, right)
        } else {
          mp3buf = mp3enc.encodeBuffer(left)
        }

        if (mp3buf.length > 0) {
          buffer.push(mp3buf)
        }
      }
      const enc = mp3enc.flush()
      if (enc.length > 0) {
        buffer.push(enc);
      }
      return new Blob(buffer, { type: 'audio/mp3' });
    }
  }
}
</script>

<style lang="scss" scoped>
</style>