vue 利用科大讯飞实现实时语音转写

这篇具有很好参考价值的文章主要介绍了vue 利用科大讯飞实现实时语音转写。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1:新建js文件,该文件在科大讯飞api的demo种可以找到


const APPID = '' // 科大讯飞id
const API_KEY = '' // 科大讯飞api_key
import CryptoJS from 'crypto-js'
import Worker from './transcode.worker.js'
import { hex_md5 } from './md5'
const recorderWorker = new Worker()

function getWebSocketUrl() {
  return new Promise((resolve, reject) => {
    // 请求地址根据语种不同变化
    var url = 'wss://rtasr.xfyun.cn/v1/ws'
    var appId = APPID
    var secretKey = API_KEY
    var ts = Math.floor(new Date().getTime() / 1000);//new Date().getTime()/1000+'';
    var signa = hex_md5(appId + ts)//hex_md5(encodeURIComponent(appId + ts));//EncryptUtil.HmacSHA1Encrypt(EncryptUtil.MD5(appId + ts), secretKey);
    var signatureSha = CryptoJSNew.HmacSHA1(signa, secretKey)
    var signature = CryptoJS.enc.Base64.stringify(signatureSha)
    url = url + "?appid=" + appId + "&ts=" + ts + "&signa=" + signature;
    resolve(url)
  })
}
const IatRecorder = class {
  constructor({ language, appId } = {}) {
    let self = this
    this.status = 'null'
    this.language = language || 'cn'
    this.appId = appId || APPID
    // 记录音频数据
    this.buffer = []
    // 记录听写结果
    this.resultText = ''
    // wpgs下的听写结果需要中间状态辅助记录
    this.resultTextTemp = ''
    recorderWorker.onmessage = function (event) {
      self.buffer.push(...event.data)
    }
  }
  setStatus(status) {
    this.onWillStatusChange && this.status !== status && this.onWillStatusChange(this.status, status)
    this.status = status
  }

  // 连接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')
        this.mediaSource.connect(this.scriptProcessor)
        this.scriptProcessor.connect(this.audioContext.destination)
        // 重新开始录音
        setTimeout(() => {
          this.webSocketSend()
        }, 500)
      }
      iatWS.onmessage = e => {
        this.result(e.data)
      }
      iatWS.onerror = e => {
        this.stop()
      }
      iatWS.onclose = e => {
        endTime = Date.parse(new Date())
        this.stop()
      }
    })
  }

  recorderStart() {
    this.stop()
    // 创造音频环境
    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') {
          recorderWorker.postMessage(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) => {
        alert('请求麦克风失败')
        this.audioContext && this.audioContext.close()
        this.audioContext = undefined
        // 关闭websocket
        if (this.webSocket && this.webSocket.readyState === 1) {
          this.webSocket.close()
        }
      }
    }
  }
  ArrayBufferToBase64(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)
  }
  sendData(buffer) {
    recorderWorker.postMessage({
      command: 'transform',
      buffer: buffer
    })
  }
  // 向webSocket发送数据
  webSocketSend() {
    if (this.webSocket.readyState !== 1) {
      return
    }
    var audioData = this.buffer.splice(0, 1280)
    this.webSocket.send(new Int8Array(audioData))
    this.handlerInterval = setInterval(() => {
      // websocket未连接
      if (this.webSocket.readyState !== 1) {
        clearInterval(this.handlerInterval)
        return
      }
      if (this.buffer.length === 0) {
        if (this.state === 'end') {
          this.webSocket.send("{\"end\": true}")
          console.log("发送结束标识");
          clearInterval(this.handlerInterval)
        }
        return false
      }
      var audioData = this.buffer.splice(0, 1280)
      if (audioData.length > 0) {
        this.webSocket.send(new Int8Array(audioData))
      }
    }, 40)
  }
  result(resultData) {
    // 识别结束
    // let jsonData = JSON.parse(e.data)
    let jsonData = JSON.parse(resultData)
    if (jsonData.action == "started") {
      // 握手成功
      console.log("握手成功");
    } else if (jsonData.action == "result") {
      // 转写结果
      this.setResult(JSON.parse(jsonData.data))
    } else if (jsonData.action == "error") {
      // 连接发生错误
      console.log("出错了:", jsonData);
    }
  }
  setResult(data) {
    let rtasrResult = []
    // console.log(data)
    rtasrResult[data.seg_id] = data
    rtasrResult.forEach(i => {
      let str = "实时转写"
      str += (i.cn.st.type == 0) ? "【最终】识别结果:" : "【中间】识别结果:"
      i.cn.st.rt.forEach(j => {
        j.ws.forEach(k => {
          k.cw.forEach(l => {
            str += l.w
          })
        })
      })
      console.log(str,'str')
    })
  }
  start() {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
    this.recorderStart()
  }
  stop() {
    this.state = 'end'
    try {
      this.mediaStream.disconnect(this.recorder)
      this.recorder.disconnect()
    } catch (e) { }
  }
}

export default IatRecorder

2: 引入第一个文件在vue页面中

<template>
<p>{{ searchData }}</p>
    <button @click="translationStart">开始</button>
    <button @click="translationEnd">停止</button>
</template>

<script>
translationStart() {
      iatRecorder.start()
    },
translationEnd() {
      const _this = this
      iatRecorder.onTextChange = function (text) {
        let inputText = text
        _this.searchData = inputText.substring(0, inputText.length - 1);//文字处理,因为不知道为什么识别输出的后面都带‘。’,这个方法是去除字符串最后一位
      }
      iatRecorder.stop()
    },
</script>

3:如果在引入的过程中有些关于worker的报错,可以参考以下方法 

在vue.config.js中加入

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

 文章来源地址https://www.toymoban.com/news/detail-518808.html

到了这里,关于vue 利用科大讯飞实现实时语音转写的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 技术解读 | 科大讯飞语音技术最新进展之二:语音识别与语音合成

    这一篇内容将围绕语音识别与合成方向,继续为大家带来相关技术解析。 “风物长宜放眼量”。面向人机交互更加自然流畅的未来,智能语音技术进展如何?该走向何方? 以下内容根据讯飞研究院杰出科学家潘嘉在NCMMSC 2022上的主题演讲《科大讯飞语音技术前沿进展》整理。

    2024年02月07日
    浏览(61)
  • UE4如何接入科大讯飞的语音识别

    本文用的是UE4 4.27测试 安卓版测试链接: 链接:https://pan.baidu.com/s/1CsdJecfyMTdxNd6XfSECQQ 提取码:m122 B站视频连接:https://space.bilibili.com/449549424?spm_id_from=333.1007.0.0 GitHub地址:https://github.com/zhangmei126/XunFei 第一步 新建一个VS的UE4 4.27项目工程(注意是UE4 4.27 VS项目) 第二步 新建一

    2023年04月08日
    浏览(55)
  • 【人工智能】科大讯飞语音识别应用开发(第三集)

    这次需要对科大讯飞语音识别接口进行语音识别应用开发,前两次都是通过WebAPI调用接口,这次换一下,通过SDK调用接口 下面是开发的详细记录过程(基于前两次的基础上) 网址:https://www.xfyun.cn/services/voicedictation 不领服务量为500且该包免费( 貌似是不同应用都可以免费领

    2024年02月13日
    浏览(54)
  • 使用讯飞语音转写API进行音频转文字

    参考官方文档:语音转写、语音转写API文档 在运行代码之前需要前往讯飞开放平台注册登录,并完成实名认证,可领取免费试用时间。 并且需要创建应用,完成应用的创建后,前去语音转写页面获取APPID和SecretKey填入代码中的appid和secret_key参数 upload_file_path参数上传的文件格

    2024年02月17日
    浏览(38)
  • 网站在线客服系统实时语音视频聊天实战开发,利用peerjs vue.js实现webRTC网页音视频客服系统...

    webRTC机制和peerjs库的介绍在其他博客中已经有了很多介绍,这里我直接搬运过来 WebRTC(Web Real-Time Communication)即:网页即时通信。 简单点讲,它可以实现浏览器网页与网页之间的音视频实时通信(或传输其它任何数据),目前主流浏览器都支持该API,WebRTC现在已经纳入W3C标准。

    2024年02月04日
    浏览(59)
  • C#调用科大讯飞离线语音合成实现文本转语音

    文本转语音(Text To Speech),简称TTS,在很多业务场景会用到,比如广播大厅,人机互动等。C#要实现TTS有不少选择,比如调用System.Speech,此处就不细说了,下面主要介绍一下C#调用科大讯飞的离线语音合成SDK来实现文本转语音。 地址:[https://www.xfyun.cn/service/offline_tts] 一、创建

    2024年02月12日
    浏览(45)
  • Java中实现在线语音识别(科大讯飞免费的SKD)、SDK下载和IDEA项目搭建、成功运行【完整代码】

    科大讯飞官网:https://www.xfyun.cn/ 首先登陆讯飞开放平台:https://passport.xfyun.cn/login,微信扫码关注登录 注册新账号 登陆后界面后,进入产品服务–实时语音转写栏目 点击个人免费套餐,下面的立即领取,它会提醒我们去实名认证 实名认证一下 提交完认证之后 可以看到认证

    2023年04月21日
    浏览(49)
  • GEC6818开发板JPG图像显示,科大讯飞离线语音识别包Linux_aitalk_exp1227_1398d7c6运行demo程序,开发板实现录音

    体积小,使用到数据结构里面的 霍夫曼树(哈夫曼树) 对数据进行压缩 1.对jpegsrc.v8c.tar.gz进行arm移植 移植方式如下: 1.将jpegsrc.v8c.tar.gz解压缩到ubuntu ~ 2.进入~/jpeg-8c对jpeg库进行配置 3.编译 4.安装,将动态库存放到 /home/gec/armJPegLib 5.清空编译记录 6.自己查看下 /home/gec/armJPegLib目

    2024年01月17日
    浏览(53)
  • ROS高效进阶第五章 -- 机器人语音交互之ros集成科大讯飞中文语音库,实现语音控制机器人小车

    从本文开始,我们将用两篇文章学习机器人语音交互。本文作为第一篇,将在ros上集成科大讯飞的中文语音库,实现语音控制机器人小车运动。至于语音识别和语音合成的原理,本文并不深究,读者可以自行搜索相关的文章介绍。这里提醒,本文的测试环境是ubuntu20.04 + ros

    2024年02月04日
    浏览(84)
  • 科大讯飞语音SDK下载及测试

    一、SDK 下载 进入讯飞开发平台官网http://www.xfyun.cn/,右上角进行注册登录,登录后点击进入SDK下载。            2.创建新应用               3.填入相关信息         4.创建完后提交后回到SDK下载页面,刷新页面,应用选择前面创建的应用,平台选择Linux,SDK选择

    2024年02月08日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包