前端仔，别再用祖传方法实现录音功能了

前端和用户直接相关，所以实现录音功能是很常见的需求。如何实现配音功能，网上一搜全是老掉牙方法。作为一个热爱新技术，喜欢与时俱进的前端仔，我实在看不下去了，就写了这篇文章教大家如何用新方法实现录音功能。

废话不多说，直接上代码（非常简单易懂，而且我封装好了）：

function Recorder(stream, mimeType) {
    const mediaRecorder = new MediaRecorder(stream);
    let chunks = [];    
    let blob
    mediaRecorder.ondataavailable = function (e) {
        chunks.push(e.data);
    }
    mediaRecorder.onstop = function () {       
        blob = new Blob(chunks, { 'type': mimeType });       
        chunks = [];
    }

    // 开始录音方法：
    this.start = function () {
        mediaRecorder.start();
    }

    // 结束录音方法：
    this.stop = function () {
        mediaRecorder.stop();
    }

    // 获取录音的音频文件
    this.getFile = function () {
        return blob
    }
}

export default function getRecorder(mimeType = "audio/ogg; codecs=opus") {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        return Promise.reject(new Error('当前浏览器不支持录音功能。'));
    }
    return navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
        return new Recorder(stream, mimeType)
    })
}

36行代码全部搞定，而且支持各种文件类型。

再看看网上搜到的祖传方法，代码过多，慎点：

（因为代码过多，我将其分成了三个文件，这里只展示主文件，过于底层的两个就不展示了，因为没有必要教大家如何用老方法实现录音，这里只是为了对比网上搜的老方法有多糟糕。
声明一下，这里没有看不起老方法的意思，在那个年代能够以这样的方式实现录音的肯定是大神。
不过现在确实都2021年了，祖传方法还这么流行，这是国内IT博客互相无脑抄袭的风气造成的。）

import encodeWAV from './utiles/encodeWAV' // 负责将音频数据编码成mav格式的文件，共64行。代码过于底层，这里不展示！
import audioTransform from './utiles/audioTransform' // 输入音频的声道，采样率，比特率和输出要求不一致时，负责做转换的。共52行。代码过于底层，这里不展示！
const channelCount = 1;
const sampleBits = 16
var HZRecorder = function (stream) {
    const outConf = { channelCount, sampleBits }
    const inConf = { channelCount, sampleBits };

    var context = new AudioContext();
    var audioInput = context.createMediaStreamSource(stream);
    outConf.sampleRate = inConf.sampleRate = context.sampleRate

    var jsProcessor = context.createScriptProcessor(0, inConf.channelCount, outConf.channelCount); //输入声道和输出声道
    //定义数据    
    var audioData = {
        size: 0,          //录音文件长度
        buffer: [],     //录音缓存                
        input: function (data) {
            this.buffer.push(new Float32Array(data));
            this.size += data.length;
        },
        encode: function () {
            let inputSampleArr = new Float32Array(this.size), offset = 0;
            for (let i = 0; i < this.buffer.length; i++) {
                inputSampleArr.set(this.buffer[i], offset);
                offset += this.buffer[i].length;
            }
            let res = audioTransform(inputSampleArr, inConf, outConf)
            return encodeWAV(res.sampleArr, res.sampleRate, res.sampleBits, res.channelCount)
        },
        clear: function () {
            this.size = 0;
            this.buffer = []
        }
    };

    //开始录音
    this.start = function () {
        audioData.clear()
        audioInput.connect(jsProcessor);       
        jsProcessor.connect(context.destination);
    }

    //停止
    this.stop = function () {
        audioInput.disconnect()       
        jsProcessor.disconnect();
    }

    //获取音频文件
    this.getBlob = function () {
        this.stop()
        return audioData.encode();
    }

    //音频采集
    jsProcessor.onaudioprocess = function (e) {
        /**
         * @type {Float32Array}
         */
        let data = e.inputBuffer.getChannelData(0)    
        audioData.input(data);
    }
};

//获取录音机
export default function getRecorder() {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        return Promise.reject(new Error('当前浏览器不支持录音功能。'));
    }
    //获取计算机的设备：录音设备
    return navigator.mediaDevices.getUserMedia({
        audio: { sampleSize: sampleBits, channelCount: 1 }
    }).then(stream => {      
        return new HZRecorder(stream);
    });
};

 老方法，涉及过多的底层。文件类型只支持wav，扩展不便。