IatRecorder.js：
这里需要你手动安装crypto-js,然后引入import CryptoJS from 'crypto-js'

npm install crypto-js --save-dev

const APPID = '你的APPID'
const API_SECRET = '你的API_SECRET '
const API_KEY = '你的API_KEY'
import CryptoJS from 'crypto-js'
import Worker from './transcode.worker.js'
const transWorker = new Worker()
console.log(transWorker)
var startTime = ""
var endTime = ""

function getWebSocketUrl(){
return new Promise((resolve, reject) => {
// 请求地址根据语种不同变化
var url = 'wss://iat-api.xfyun.cn/v2/iat'
var host = 'iat-api.xfyun.cn'
var apiKey = API_KEY
var apiSecret = API_SECRET
var date = new Date().toGMTString()
var algorithm = 'hmac-sha256'
var headers = 'host date request-line'
var signatureOrigin = host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1
var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret)
var signature = CryptoJS.enc.Base64.stringify(signatureSha)
var authorizationOrigin = api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"
var authorization = btoa(authorizationOrigin)
url = ${url}?authorization=${authorization}&date=${date}&host=${host}
resolve(url)
})
}
const IatRecorder = class {
constructor({ language, accent, appId } = {}) {
let self = this
this.status = 'null'
this.language = language || 'zh_cn'
this.accent = accent || 'mandarin'
this.appId = appId || APPID
// 记录音频数据
this.audioData = []
// 记录听写结果
this.resultText = ''
// wpgs下的听写结果需要中间状态辅助记录
this.resultTextTemp = ''
transWorker.onmessage = function (event) {
// console.log("构造方法中",self.audioData)
self.audioData.push(...event.data)
}
}

// 修改录音听写状态
setStatus(status) {
  this.onWillStatusChange && this.status !== status && this.onWillStatusChange(this.status, status)
  this.status = status
}
setResultText({ resultText, resultTextTemp } = {}) {
  this.onTextChange && this.onTextChange(resultTextTemp || resultText || '')
  resultText !== undefined && (this.resultText = resultText)
  resultTextTemp !== undefined && (this.resultTextTemp = resultTextTemp)
}
// 修改听写参数
setParams({ language, accent } = {}) {
  language && (this.language = language)
  accent && (this.accent = accent)
}
// 连接websocket
connectWebSocket() {
  return getWebSocketUrl().then(url => {
    let iatWS
    if ('WebSocket' in window) {
      iatWS = new WebSocket(url)
    } else if ('MozWebSocket' in window) {
      iatWS = new MozWebSocket(url)
    } else {
      alert('浏览器不支持WebSocket')
      return
    }
    this.webSocket = iatWS
    this.setStatus('init')
    iatWS.onopen = e => {
      this.setStatus('ing')
      // 重新开始录音
      setTimeout(() => {
        this.webSocketSend()
      }, 500)
    }
    iatWS.onmessage = e => {
      this.result(e.data)
    }
    iatWS.onerror = e => {
      this.recorderStop()
    }
    iatWS.onclose = e => {
      endTime = Date.parse(new Date())
      console.log("持续时间",endTime-startTime)
      this.recorderStop()
    }
  })
}
// 初始化浏览器录音
recorderInit() {
  navigator.getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia

  // 创建音频环境
  try {
    this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
    this.audioContext.resume()
    if (!this.audioContext) {
      alert('浏览器不支持webAudioApi相关接口')
      return
    }
  } catch (e) {
    if (!this.audioContext) {
      alert('浏览器不支持webAudioApi相关接口')
      return
    }
  }

  // 获取浏览器录音权限
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices
      .getUserMedia({
        audio: true,
        video: false,
      })
      .then(stream => {
        getMediaSuccess(stream)
      })
      .catch(e => {
        getMediaFail(e)
      })
  } else if (navigator.getUserMedia) {
    navigator.getUserMedia(
      {
        audio: true,
        video: false,
      },
      stream => {
        getMediaSuccess(stream)
      },
      function(e) {
        getMediaFail(e)
      }
    )
  } else {
    if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
      alert('chrome下获取浏览器录音功能，因为安全性问题，需要在localhost或127.0.0.1或https下才能获取权限')
    } else {
      alert('无法获取浏览器录音功能，请升级浏览器或使用chrome')
    }
    this.audioContext && this.audioContext.close()
    return
  }
  // 获取浏览器录音权限成功的回调
  let getMediaSuccess = stream => {
    // 创建一个用于通过JavaScript直接处理音频
    this.scriptProcessor = this.audioContext.createScriptProcessor(0, 1, 1)
    this.scriptProcessor.onaudioprocess = e => {
      // 去处理音频数据
       if (this.status === 'ing') {
         transWorker.postMessage(e.inputBuffer.getChannelData(0))
        //  this.audioData.push(e.inputBuffer.getChannelData(0))
       }
    }
    // 创建一个新的MediaStreamAudioSourceNode 对象，使来自MediaStream的音频可以被播放和操作
    this.mediaSource = this.audioContext.createMediaStreamSource(stream)
    // 连接
    this.mediaSource.connect(this.scriptProcessor)
    this.scriptProcessor.connect(this.audioContext.destination)
    this.connectWebSocket()
  }

  let getMediaFail = (e) => {
    this.audioContext && this.audioContext.close()
    this.audioContext = undefined
    // 关闭websocket
    if (this.webSocket && this.webSocket.readyState === 1) {
      this.webSocket.close()
    }
  }
}
recorderStart() {
  if (!this.audioContext) {
    this.recorderInit()
  } else {
    this.audioContext.resume()
    this.connectWebSocket()
  }
}
// 暂停录音
recorderStop() {
  // safari下suspend后再次resume录音内容将是空白，设置safari下不做suspend
  if (!(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgen))){
    this.audioContext && this.audioContext.suspend()
  }
  this.setStatus('end')
}
// 处理音频数据
// transAudioData(audioData) {
//   audioData = transAudioData.transaction(audioData)
//   this.audioData.push(...audioData)
// }
// 对处理后的音频数据进行base64编码，
toBase64(buffer) {
  var binary = ''
  var bytes = new Uint8Array(buffer)
  var len = bytes.byteLength
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i])
  }
  return window.btoa(binary)
}
// 向webSocket发送数据
webSocketSend() {
  if (this.webSocket.readyState !== 1) {
    return
  }
  let audioData = this.audioData.splice(0, 1280)
  var params = {
    common: {
      app_id: this.appId,
    },
    business: {
      language: this.language, //小语种可在控制台--语音听写（流式）--方言/语种处添加试用
      domain: 'iat',
      accent: this.accent, //中文方言可在控制台--语音听写（流式）--方言/语种处添加试用
    },
    data: {
      status: 0,
      format: 'audio/L16;rate=16000',
      encoding: 'raw',
      audio: this.toBase64(audioData),
    },
  }
  console.log("参数language：",this.language)
  console.log("参数accent：",this.accent)
  this.webSocket.send(JSON.stringify(params))
  startTime = Date.parse(new Date())
  this.handlerInterval = setInterval(() => {
    // websocket未连接
    if (this.webSocket.readyState !== 1) {
      console.log("websocket未连接")
      this.audioData = []
      clearInterval(this.handlerInterval)
      return
    }
    if (this.audioData.length === 0) {
      console.log("自动关闭",this.status)
      if (this.status === 'end') {
        this.webSocket.send(
          JSON.stringify({
            data: {
              status: 2,
              format: 'audio/L16;rate=16000',
              encoding: 'raw',
              audio: '',
            },
          })
        )
        this.audioData = []
        clearInterval(this.handlerInterval)
      }
      return false
    }
    audioData = this.audioData.splice(0, 1280)
    // 中间帧
    this.webSocket.send(
      JSON.stringify({
        data: {
          status: 1,
          format: 'audio/L16;rate=16000',
          encoding: 'raw',
          audio: this.toBase64(audioData),
        },
      })
    )
  }, 40)
}
result(resultData) {
  // 识别结束
  let jsonData = JSON.parse(resultData)
  if (jsonData.data && jsonData.data.result) {
    let data = jsonData.data.result
    let str = ''
    let resultStr = ''
    let ws = data.ws
    for (let i = 0; i < ws.length; i++) {
      str = str + ws[i].cw[0].w
    }
    console.log("识别的结果为：",str)
    // 开启wpgs会有此字段(前提：在控制台开通动态修正功能)
    // 取值为 "apd"时表示该片结果是追加到前面的最终结果；取值为"rpl" 时表示替换前面的部分结果，替换范围为rg字段
    if (data.pgs) {
      if (data.pgs === 'apd') {
        // 将resultTextTemp同步给resultText
        this.setResultText({
          resultText: this.resultTextTemp,
        })
      }
      // 将结果存储在resultTextTemp中
      this.setResultText({
        resultTextTemp: this.resultText + str,
      })
    } else {
      this.setResultText({
        resultText: this.resultText + str,
      })
    }
  }
  if (jsonData.code === 0 && jsonData.data.status === 2) {
    this.webSocket.close()
  }
  if (jsonData.code !== 0) {
    this.webSocket.close()
    console.log(`${jsonData.code}:${jsonData.message}`)
  }
}
start() {
  this.recorderStart()
  this.setResultText({ resultText: '', resultTextTemp: '' })
}
stop() {
  this.recorderStop()
}

}

export default IatRecorder

第二步: 在你使用的页面配置：
<template>
<div class="conter">
<button @click="translationStart">开始</button>
<button @click="translationEnd">停止</button>
</div>
</template>
<script>
import IatRecorder from '@/assets/js/IatRecorder';
const iatRecorder = new IatRecorder('en_us','mandarin','9abbbfb0')//小语种-中文方言-appId
export default {
data() {
return {
};
},
methods: {
translationStart() {
iatRecorder.start();
},
translationEnd() {
iatRecorder.onTextChange = (text) => {
let inputText = text;
this.searchData = inputText.substring(0, inputText.length - 1); //文字处理，因为不知道为什么识别输出的后面都带‘。’，这个方法是去除字符串最后一位
console.log(this.searchData);
};
iatRecorder.stop();
},
}
};
</script>

在你引用IatRecorder .js的时候问题来了

IatRecorder .js文件里面const transWorker = new Worker() 就会报错，原因是vue里面不能直接使用原生的new Worker,也会跟webpack版本有关系.
众所周知，JavaScript是单线程的，一些复杂比较耗时的操作，会阻塞页面的渲染交互，引起页面卡顿，影响用户体验。web worker是html5的新特性之一，主要就是用来解决此类问题，为页面额外开启一个线程，用来处理一些比较耗时操作，不影响主线程的进行。

在实际vue项目的开发使用过程中，还是遇到不少坑

其不同模块间的通信主要通过postMessage进行消息推送，通过onmessage进行消息接收，所以vue项目不能直接使用，得配置，而科大讯飞语音官网上给的不是vue项目示例，也没有特别说明，所以我也踩了一个坑.

第三步：解决new Worker()报错问题
首先两个js文件都不用改动

然后安装(这里安装最新版后运行会报错，建议使用2.0.0版本，而不是最新版)

//最新版本
npm install worker-loader -D
//指定版本
npm install worker-loader@2.0.0 -D
vue.config.js要添加以下配置：

configureWebpack: config => {
config.module.rules.push({
test: /.worker.js$/,
use: {
loader: 'worker-loader',
options: { inline: true, name: 'workerName.[hash].js' }
}
})
},
在你运行时候,会发现控制台会报错，“window is undefined”，这个是因为worker线程中不存在window对象，因此不能直接使用，要用this代替，要在vue.config.js中添加以下配置

chainWebpack: config => {
config.output.globalObject('this')
}
打包的时候报错就加上:

parallel: false
合成一起就是

module.exports = {
configureWebpack: config => {
config.module.rules.push({
test: /.worker.js$/,
use: {
loader: 'worker-loader',
options: { inline: true, name: 'workerName.[hash].js' }
}
})
},
parallel: false,
chainWebpack: config => {
config.output.globalObject('this')
}
}

配置完后你会发现不会报错了，然后就可以正常运行了!