Web Audio API 页面录音功能实现

近期公司需要一个页面录音的小功能，因此调研了Web Audio API,因为一直也没怎么做过js开发，期间踩坑无数，在此做一记录，希望能帮到后面有需要的人。

1.Web Audio介绍

Web Audio API 官方文档不但提供了在Web上控制音频的一个非常有效通用的系统，而且提供了大量音频相关的基础知识，对入门音频编程有极大的帮助,允许开发者机型自选音频源,对音频添加特效，使音频可视化，添加空间效果等功能的开发。

一个简单而典型的Web audio流程如下:

• 1.创建音频上下文
• 2.在音频上下文理创建源 例如 振荡器, 流
• 3.创建效果节点，例如混响、双二阶滤波器、平移、压缩
• 4.为音频选择一个目的地，例如你的系统扬声器
• 5.连接源到效果器，对目的地进行效果输出

详细信息请参考官方网站,网站地址:

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

2.JS this指针说明

开发过程中关于JavaScript this踩了无数坑。在函数调用过程中，this绑定的对象各种出错，因此本节中特意给出JavaScript this 的官方说明.
官方参考文档:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

3.录音源码Demo

鉴于在开发过程中未找到合适的参考代码，把源码公布如下:

/*!
 * Record Javascript Library
 */

'use strict';

/**
* AudioRecorder类.
* @constructor
*/
function AudioRecorder(){
    //麦克风
    this.mDevice = null;
    //从麦克风获取的音频流
    this.mMediaStream = null;
    this.mAudioContext = null;
    this.mAudioFromMicrophone = null;
    this.mMediaRecorder = null;
    this.mStatus = "stop";
    this.mChunks = [];
    //回调函数
    this.onStopCallBack = null;
    
}

AudioRecorder.prototype={
    

    /**
    * 获取录音机对象设备
    * @method getAudioRecorderDevice
    * @for AudioRecorder
    * @returns {Promise} 返回一个promise对象
    */
    getAudioRecorderDevice: function(){
        //仅用来进行录音
        var constraints = { audio: true};
        // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
        if(navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia 
        // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
        if(navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function(constraints) {

                // 首先，如果有getUserMedia的话，就获得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                if(!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }

                // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                this.mDevice = new Promise(function(resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        else
        {
            this.mDevice = navigator.mediaDevices.getUserMedia(constraints);
        }
        
        if(this.mDevice != null)
        {
            this.mDevice.then((mediaStream) => { this.openDeviceSuccess.call(this,mediaStream) },this.openDeviceFailure);
        }
    },
    
    addOnStopCallback : function (onStop)
    {
        this.onStopCallBack = onStop;
    },
    
    
    openDeviceSuccess : function(mediaStream)
    {
        this.mMediaStream = mediaStream;
    },
    
    openDeviceFailure : (reason) =>
    {
        let errorMessage;
        switch(reason.name) {
            // 用户拒绝
            case 'NotAllowedError':
            case 'PermissionDeniedError':
                errorMessage = '用户已禁止网页调用录音设备';
                break;
                // 没接入录音设备
            case 'NotFoundError':
            case 'DevicesNotFoundError':
                errorMessage = '录音设备未找到';
                break;
                // 其它错误
            case 'NotSupportedError':
                errorMessage = '不支持录音功能';
                break;
            default:
                errorMessage = '录音调用错误';
                window.console.log(error);
        }
        alert(errorMessage);
    },
    
    /**
    * 开始录音
    * @method startRecord
    * @for AudioRecorder
    * @return {Boolean}
    */
    startRecord : function(){
        let retValue = false;
        if(this.mStatus == "stop")
        {
            this.mChunks = [];
            if(this.mMediaRecorder == null)
            {
                const AudioContext = window.AudioContext || window.webkitAudioContext;
                this.mAudioContext = new AudioContext();
                //创建音频源
                this.mAudioFromMicrophone= this.mAudioContext.createMediaStreamSource(this.mMediaStream);
                //创建目的节点
                var destination = this.mAudioContext.createMediaStreamDestination();
                this.mMediaRecorder = new MediaRecorder(destination.stream);
                this.mAudioFromMicrophone.connect(destination);
                this.mMediaRecorder.ondataavailable = (audioData) => { this.onProcessData.call(this,audioData)};
                this.mMediaRecorder.onstop = (event) => { this.onStop.call(this,event)};
            }
            this.mMediaRecorder.start();
            this.mStatus = "record";
            retValue = true;
        }
        return retValue;
    },
    
    onProcessData : function(audioData)
    {
        this.mChunks.push(audioData.data);
    },
    
    onStop : function (event)
    {
        //var blob = new Blob(this.mChunks, { 'type' : 'audio/ogg; codecs=opus' });
        var blob = new Blob(this.mChunks, { 'type' : 'audio/mpeg' });
        var mp3URL = URL.createObjectURL(blob);
        if(this.onStopCallBack != null)
        {
            this.onStopCallBack(mp3URL);
        }
        
    },
        
    /**
    * 结束录音
    * @method stopRecord
    * @for AudioRecorder
    */
    stopRecord: function(){
        if(this.mStatus == "record")
        {
            this.mMediaRecorder.requestData();
            this.mMediaRecorder.stop();
            this.mStatus = "stop";
        }
    }
}
 

4.结束语

这次小功能的调研，发现Web Audio API的功能强大，可以完成各种音频处理的工作，后续如果有时间可以写一个页面版的音频应用。

参考:

https://github.com/mdn/webaudio-examples
https://mdn.github.io/webaudio-examples/create-media-stream-destination/