一、使用場景：

調(diào)用移動(dòng)設(shè)備的錄音

• 1）獲取錄音文件，執(zhí)行播放操作
• 2）獲取錄音文件，執(zhí)行上傳服務(wù)，通過服務(wù)解析成文字
• 3）獲取錄音文件，執(zhí)行上傳服務(wù)，通過服務(wù)對(duì)比進(jìn)行相應(yīng)反饋

二、js庫引入

1、方式一：使用script標(biāo)簽引入

// 引入js庫
<script src="項(xiàng)目路徑/src/recorder-core.js"></script>
// 引入需要使用到的音頻格式編碼引擎的js文件
<script src="項(xiàng)目路徑/src/engine/wav.js"></script>
// 如果要繪制音頻波形圖，需要引入
<script src="src/extensions/waveview.js"></script>

2、方式二：通過import引入

// 引入js庫
import Recorder from 'recorder-core'
// 引入需要使用到的音頻格式編碼引擎的js文件
import 'recorder-core/src/engine/wav'
// 如果要繪制音頻波形圖，需要引入
import 'recorder-core/src/extensions/waveview'

三、調(diào)用方法

注意：需要在https或者localhost環(huán)境下才能打開設(shè)備錄音權(quán)限。

1、調(diào)用設(shè)備錄音權(quán)限

export function recOpen (_this) {
  let This = _this;
  let rec = This.rec = Recorder({
      type: This.type || "wav", // wav格式, 需要使用的type類型，需提前把格式支持文件加載進(jìn)來
      bitRate: This.bitRate || 36, // 比特率kbps，越大音質(zhì)越好
      sampleRate: This.sampleRate || 18000, // 采樣率hz，每秒音波震動(dòng)次數(shù)，越大細(xì)節(jié)越豐富
      onProcess: function(buffers, powerLevel, duration, sampleRate){
            buffers, // [[Int16,...],...]：緩沖的PCM數(shù)據(jù)，為從開始錄音到現(xiàn)在的所有pcm片段，每次回調(diào)可能增加0-n個(gè)不定量的pcm片段
            powerLevel, // 輸入的音頻波動(dòng)值0-100
            duration, // 錄音持續(xù)時(shí)間ms
            sampleRate, // 錄音使用的采樣率
            // 利用waveview擴(kuò)展實(shí)時(shí)繪制波形
            This.wave.input(buffers[buffers.length-1],powerLevel,sampleRate);
      } //錄音實(shí)時(shí)回調(diào)，大約1秒調(diào)用12次回調(diào)
  });
  rec.open(function(){
      console.log('打開成功：');
      // 渲染音頻波形圖
      This.wave = Recorder.WaveView({elem:".ctrlProcessWave"});
  },function(msg, isUserNotAllow){
      // 瀏覽器不支持錄音、用戶拒絕麥克風(fēng)權(quán)限、或者非安全環(huán)境（非https、file等 
      console.log((isUserNotAllow ? "UserNotAllow，" : "") + "無法錄音:"+msg);
  });
}

2、開始錄音

export function recStart (_this) {
        if(!_this.rec){
            console.log('未打開錄音權(quán)限')；
            return;
        }
       this.rec.start();
},

3、結(jié)束錄音，并釋放資源

export function recStop (_this) {
        let This = _this;
        let rec = This.rec;
        This.rec = null;
        if(!rec){
            console.log('未打開錄音權(quán)限')；
            return;
        }
        rec.stop((blob, duration) => {
            // blob: 流文件，duration: 持續(xù)時(shí)間ms，這里可以執(zhí)行文件播放或者文件上傳
            _this.logs = {
                blob: blob,
                duration: duration,
            }
        }, (s) => {
           console.log("結(jié)束出錯(cuò)："+s);
        }, true); // true: 自動(dòng)關(guān)閉錄音權(quán)限釋放資源
}

四、總結(jié)

如果有更多的定制需要詳情見：
https://github.com/xiangyuecn/Recorder