项目中需要利用百度语音接口在Web端实现语音识别功能，采用了这样的技术方案，但实现时遇到了很多问题，发现网上大部分文章都只是在详解官方提供的example示例，对实际开发没有提供什么有价值的建议，而recorder.js是无法直接适配百度AI的语音接口的，故本篇将开发中各个细节点记录与此，欢迎指点交流。

一. 技术栈选择

需求：利用百度语音接口在Web端实现语音识别功能

技术栈：React+recorder-tool.js +recorder.js + Express + Baidu语音识别API

recorder.js项目地址:https://github.com/mattdiamond/Recorderjs

演示效果：

二. 前端开发细节

为recorder.js提供一个代理对象

前端的主框架采用React，在基本结构和语法上并没有太多问题，为了使用recorder.js，我们封装了一个recorder-tool.js作为代理，其实现方法较为简单，就是将官方示例中example示例中的html文件的脚本部分封装成一个单例对象作为recorder.js的代理，然后暴露一组API供上层调用，大致的结构如下：

import Recorder from './recorder-src'; //Singleton var recorder;  //start record function startRecord() {     recorder && recorder.record(); }  //stop record function stopRecord(button) {     recorder && recorder.stop(); }  //....其他一些方法  export default {     init : init,     start: startRecord,     stop: stopRecord,     exportData: exportData,     sendRequest: sendRequest,     clear: clearRecord,     createDownloadLink : createDownloadLink }

解除exportWAV方法的回调地狱

官方示例中输出wav编码格式的数据这个动作是通过webworker来完成的，也就是说二进制数据处理的开始和结束时间点是通过事件来触发的，recorder.exportWAV( )接收一个回调函数作为入参，在得到wav格式的数据后会执行传入的回调函数，如果要在react中实现，就需要写成：

//record-page.js ... 
                        
关键字：