基于FlashWavRecorder实现IE11浏览器录音后用科大讯飞转文字

   首先呢，明确下我们的目标，支持IE11浏览器录音后转文字。我们用逆向思维思考下，音频转文字。我们目前用的是科大讯飞的SDK。前端的话，把我们拿到的音频数据，包装好，调用一下后端给的接口，然后后端调讯飞SDK，转化为文字，发回来给我们。所以我们最主要是拿到音频数据，即录音。那我们难点是IE11上录音，因为IE 不支持 navigator.mediaDevices.getUserMedia这样的API。这里用JS调用flash去实现IE上录音。(应该还可以调用ActiveX，没尝试)。

   这里在github找到两个可以运行起来的demo。传送门：recorder.js,FlashWavRecorder 

   这两个提供的example 都可以正常跑起来。recorder.js音质比较好，第二个杂音大点。但recorder.js不知道怎么取到录音后的音频数据，照理说，上传都可以实现了，拿到音频数据，理应可以。或许是我的能力问题，还请指点。FlashWavRecorder 有getBase64的方法，所以就选用FlashWavRecorder 了。



  调用别人的SDK，就要符合别人的游戏规则。如下摘自科大讯飞接入规则

//这里使用 document.getElementById(RECORDER_APP_ID).style.top='-3333px'
// 因为把swf对象设置为display:none 或者visibility:hidden 都是使用不了
window.fwr_event_handler = function fwr_event_handler() {//flash插件相关状态反馈
var name, $controls;
switch (arguments[0]) {
case "ready":
FWRecorder.uploadFormId = "#uploadForm";
FWRecorder.uploadFieldName = "upload_file[filename]";
FWRecorder.connect(RECORDER_APP_ID, 0);//如果老是报 recoder is null 这里没有调进来
FWRecorder.recorderOriginalWidth = appWidth;
FWRecorder.recorderOriginalHeight = appHeight;
break;

  case "permission_panel_closed":
            FWRecorder.recorderOriginalWidth = 0;
            FWRecorder.recorderOriginalHeight = 0;
            document.getElementById(RECORDER_APP_ID).style.top='-3333px'//隐藏白白一块
                FWRecorder.defaultSize();
                break;
  case "microphone_user_request":
    FWRecorder.showPermissionWindow();//这里请求后 会弹出 是否 允许 使用麦克风的请求
    break;

    ....这里省略局部代码
  case "microphone_level"://这里用于显示声波。如果成功接入麦克风，录音的时候会一直调用
    $level.css({height: arguments[1] * 100 + '%'});
    break;

    ....这里省略局部代码

};
.......这里省略局部代码
});

      以上主要是理解swfobject.embedSWF的用法。这里有详细的传送门： swfobject.js使用

//recoder.js

(function(global) {
var Recorder;

var RECORDED_AUDIO_TYPE = "audio/wav";

Recorder = {
recorder: null,
recorderOriginalWidth: 0,
recorderOriginalHeight: 0,
uploadFormId: null,
uploadFieldName: null,
isReady: false,

connect: function(name, attempts) {//连接麦克风 主要是init recorder
  if(navigator.appName.indexOf("Microsoft") != -1) {
    Recorder.recorder = window[name];
  } else {
    Recorder.recorder = document[name];//swfObject对象 ，这里的 name='recorderApp'
  }

  if(attempts >= 40) {
    return;
  }

  // flash app needs time to load and initialize
  if(Recorder.recorder && Recorder.recorder.init) {
    Recorder.recorderOriginalWidth = Recorder.recorder.width;
    Recorder.recorderOriginalHeight = Recorder.recorder.height;
    if(Recorder.uploadFormId && $) {
      var frm = $(Recorder.uploadFormId); 
     Recorder.recorder.init(frm.attr('action').toString(), Recorder.uploadFieldName, frm.serializeArray());
    }
    return;
  }

  setTimeout(function() {Recorder.connect(name, attempts+1);}, 100);
},

playBack: function(name) {//播放
  // TODO: Rename to `playback`
  Recorder.recorder.playBack(name);
},

stopRecording: function() {//停止录音
  Recorder.recorder.stopRecording();
},

resize: function(width, height) {//设置 麦克风权限请求框大小
  Recorder.recorder.width = width + "px";
  Recorder.recorder.height = height + "px";
},

defaultSize: function() {
  Recorder.resize(Recorder.recorderOriginalWidth, Recorder.recorderOriginalHeight);
},

show: function() {
  Recorder.recorder.show();
},

hide: function() {
  Recorder.recorder.hide();
},

getBase64: function(name) {//来获取base64数据 如果需要转回来 window.atob("base64")
  var data = Recorder.recorder.getBase64(name);
  return 'data:' + RECORDED_AUDIO_TYPE + ';base64,' + data;
},

getBlob: function(name) {//这里转化为blod 后面讯飞转文字的时候要用到。当然可以自己转
  var base64Data = Recorder.getBase64(name).split(',')[1];
  return base64toBlob(base64Data, RECORDED_AUDIO_TYPE);
},
showPermissionWindow: function(options) {
  Recorder.resize(240, 160);
  // need to wait until app is resized before displaying permissions screen
  var permissionCommand = function() {
    if (options && options.permanent) {
      Recorder.recorder.permitPermanently();
    } else {
      Recorder.recorder.permit();
    }
  };
  setTimeout(permissionCommand, 1);
},

};

function base64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  var slice = byteCharacters.slice(offset, offset + sliceSize);

  var byteNumbers = new Array(slice.length);
  for (var i = 0; i < slice.length; i++) {
    byteNumbers[i] = slice.charCodeAt(i);
  }

  var byteArray = new Uint8Array(byteNumbers);
  byteArrays.push(byteArray);
}

return new Blob(byteArrays, {type: contentType});

}

global.FWRecorder = Recorder;

})(this);

然后写几个button 接入就好了。 大家可以动手试一试。

注意:如果是在vue.js中当成模块的时候，ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";

不能使用arguments.callee；不能使用arguments.caller；禁止this指向全局对象；不能使用fn.caller和fn.arguments获取函数调用的堆栈 等等 所以引入swfobject.js 的时候 要把 arguments.callee 替换掉。 传送门:严格模式下arguments.callee代替思路

例如有用arguments.callee的函数里，

function (){if(J){return}try{j.documentElement.doScroll("left")}catch(X){setTimeout(arguments.callee,0);

把匿名函数 改为具名函数 ? swfobject.js 里面好像有7处需要改

function fn(){if(J){return}try{j.documentElement.doScroll("left")}catch(X){setTimeout(fn,0);

​