vue2 录音总结

录音用法

Promise 支持 async await

链接 : https://github.com/2fps/recorder

下载

npm i js-audio-recorder

引用

import Recorder from 'js-audio-recorder';

let recorder = new Recorder();

标签方法: 
<script type="text/javascript" src="./dist/recorder.js"></script>

let recorder = new Recorder();

配置初始化参数

import Recorder from 'js-audio-recorder';

let recorder = new Recorder({
    sampleBits: 16,         // 采样位数，支持 8 或 16，默认是16
    sampleRate: 16000,      // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
    numChannels: 1,         // 声道，支持 1 或 2， 默认是1
    compiling: false,       // 是否边录边转换，默认是false
});

使用api

//开始录音
recorder.start().then(() => {
    // 开始录音
    console.log('开始录音')
}, (error) => {
    // 出错了
    console.log("设备不支持",`${error.name} : ${error.message}`);
});

// 结束录音
recorder.stop();

// 暂停录音
recorder.pause();

// 继续录音
recorder.resume()

// 录音播放
recorder.play();

// 恢复录音播发
recorder.resumePlay();

// 获取 录音 数据(Blob) ==> 返回bolb格式
recorder.getPCMBlob();  //==> 返回pcm格式
recorder.getWAVBlob();  //==> 返回wav格式

// 下载录音文件

// 下载pcm文件
recorder.downloadPCM(/* 文件名字*/);  //==> pcm格式
recorder.downloadWAV(/* 文件名字*/);  //==> wav格式

// 播放外部录音
Recorder.playAudio(/* 放入blob数据 */);

// 音波显示
let dataArray = recorder.getRecordAnalyseData();
//返回的是一个1024长的，0-255大小的Uint8Array类型。用户可以根据这些数据自定义录音波形

注意很重要提醒

给后台数据是 blob格式 , 公司服务器返回格式为文件流

axios.get('/file-server/file/download', {
    params: {
        id: XXXXX
    },
    responseType: 'blob',  // 把后台返回数据转换为 blob 格式
    emulateJSON: true
}).then(res => {
    console.log('下载的是什么格式',res)
    let blob = new Blob([res], {type: 'audio/wav'})  // 转换音频为wav格式
    this.$refs.audioID.src = window.URL.createObjectURl(blob)
    this.$refs.aidioID.play() 
    
    // 也可以用 Recorder.playAudio(res)
    // 也可 直接将res 变为 audio 标签的src属性的地址 ==>  this.$refs.audioID.src = window.URL.createObjectURl(res)
    
}