vue實現錄音功能js-audio-recorder

前言：

        由於業務須要，如今將整理的錄音功能資料記錄下，使用插件js-audio-recorder

實現效果：可獲得三種錄音數據，pcm,wav,mp3 等

官方api入口：點我(網很差的童鞋能夠看最下面的api截圖)

官方案例入口：點我

官方源碼git入口：點我

實現步驟：

一：安裝插件 js-audio-recorder

cnpm i js-audio-recorder --s

二：安裝將格式轉換爲mp3的插件 lamejs

cnpm install lamejs --s

三：附上實現源碼：

提示：慎用自身的這個監聽事件，能夠拿到數據，可是每秒拿到的數據很是多

<template>
  <div class="home" style="margin:1vw;">
    <Button type="success" @click="getPermission()" style="margin:1vw;">獲取麥克風權限</Button>
    <br/>
    <Button type="info" @click="startRecorder()"  style="margin:1vw;">開始錄音</Button>
    <Button type="info" @click="resumeRecorder()" style="margin:1vw;">繼續錄音</Button>
    <Button type="info" @click="pauseRecorder()" style="margin:1vw;">暫停錄音</Button>
    <Button type="info" @click="stopRecorder()" style="margin:1vw;">結束錄音</Button>
    <br/>
    <Button type="success" @click="playRecorder()" style="margin:1vw;">錄音播放</Button>
    <Button type="success" @click="pausePlayRecorder()" style="margin:1vw;">暫停錄音播放</Button>
    <Button type="success" @click="resumePlayRecorder()" style="margin:1vw;">恢復錄音播放</Button>
    <Button type="success" @click="stopPlayRecorder()" style="margin:1vw;">中止錄音播放</Button>
    <br/>
    <Button type="info" @click="getRecorder()" style="margin:1vw;">獲取錄音信息</Button>
    <Button type="info" @click="downPCM()" style="margin:1vw;">下載PCM</Button>
    <Button type="info" @click="downWAV()" style="margin:1vw;">下載WAV</Button>
    <Button type="info" @click="getMp3Data()" style="margin:1vw;">下載MP3</Button>
    <br/>
    <Button type="error" @click="destroyRecorder()" style="margin:1vw;">銷燬錄音</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,              // 採樣率，支持 1102五、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();//獲取左聲道和右聲道音頻數據



        debugger

      },
      /**
       *  下載錄音文件
       * */
      //下載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='less' scoped>

</style>

到這裏，代碼就結束了，上面每一個方法都有很詳細的註釋，就不累贅了

 

整理api:（有代理的能夠看官網，這裏是摘取官網的api）

1，使用

2，屬性

3，操做

4，Event

5，應用

6，Player

 

7，其餘音頻格式