腾讯IM web版本实现迅飞语音听写(流式版)

本文基于TUIKit Demo项目集成迅飞语音听写(流式版)功能:

主要代码:

复制代码
// \src\TUIKit\components\TUIChat\message-input\index.vue
<template>
	<!-- 录音按钮 -->
	<div @touchstart.stop="touchstart" />
	<!-- 输入框 -->
	<MessageInputEditor  ref="editor"/>
</template>

<script setup lang="ts">
// xf-voice代码请参考本文附件
import { IatRecorder } from './xf-voice'

let xfVoice = null

const getPermission = () => {
return navigator.mediaDevices.getUserMedia({ audio: true })
}

const initXFVoice = (webSocketUrl) => {
    // 实例化迅飞语音听写(流式版)WebAPI
    let times = null
    xfVoice = new IatRecorder({
      APPID: '填写自己的APPID',
      webSocketUrl,
      onWillStatusChange: function (oldStatus, newStatus) {
      },
      onTextChange: function (text, sliceText) {
          //监听识别结果的变化
          if(sliceText) {
            xfVoiceWaiting.value = false
            editor.value.setEditorContent(sliceText)
          }
      }
    });
}

const touchstart = (event: any) => {
	// 获取网页录音授权
	getPermission().then(() => {
      xfVoice?.start()
    }, (error) => {
        console.log(`${error.name} : ${error.message}`);
    })
}

onMounted(() => {
 // getXFVoiceAuthUrl请求获取webSocket鉴权地址,接口需要后端提供
  getXFVoiceAuthUrl({}).then(res => {
    if(res?.data?.code == 200) {
      initXFVoice(res.data.data.url)
    } else {
      console.error('语音授权认证失败)
    }
  }).catch((e) => {
    console.error(e)
  })
})

</script>

对于uniapp 微信小程序版本的实现,后续文章会给出。

相关推荐
龙腾-虎跃24 分钟前
FreeSWITCH FunASR语音识别模块
人工智能·语音识别·xcode
Nan_Shu_6141 小时前
Web前端面试题(2)
前端
知识分享小能手1 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队2 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20503 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端3 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿3 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉3 小时前
Vue组件化开发介绍
前端·javascript·vue.js