科大讯飞 vue.js 语音听写流式实现 全网首发

组件下载

还是最近的需求,页面表单输入元素过多,需要实现语音识别来由用户通过朗读的方式向表单中填写数据,尽量快的、高效的完成表单数据采集及输入。

国内科大讯飞在语音识别方面的建树还是有目共睹,于是还是选择了科大讯飞的平台。

去其官方网站注册账号后,打开控制台-讯飞开放平台 开始语音听写功能,按照如下的方式将功能集成到你的项目中!此实现是借助官方js的实现进行VUE.JS的封装实现,其官方没有对应的实现SDK,通过不懈努力将其封装完毕,供有使用的同学参考集成。

下载源码包!

源码实现  直接点击下载即可。下载完成解压后,尽量不要修改项目的目录结构。拖到你的项目中。

 打开index文件,配置相关信息!APPID、APISecret、APIKey

至此组件信息配置完毕!

现在在页面中使用:

1、引入组件

import speech2text from '@/views/components/speechToText/iat/index'

2、注册组件及相应的变量、回调方法:

export default {name: "",data() {return {//语音识别audioWorking: false};},components: {speech2text},created() {},mounted() {},methods: {toAudioRecognise() {this.audioWorking = true},audioChanged(e){let r = e.result}}
};
</script>

3、使用组件:

<template><div class="py-20 h-100 container-bg" :class="[!noPadding ? 'px-20' : 'px-10']" v-loading="showSelfLoading"><div  class="flex-row" @click="toAudioRecognise"><el-image class="audio-icon" :src="require('@/assets/images/audioRec.png')">                                    </el-image></div><speech2text v-if="audioWorking" @close="audioWorking=false" @changed="audioChanged"></speech2text></div>
</template>

完毕,睡觉。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/153715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【AI实用技巧】GPT写sql统计语句

编写sql的统计语句是一项复杂的任务&#xff0c;特别是涉及多表的情况下。但有了GPT的帮助&#xff0c;一切变得轻松愉快。 AI7号 - 最强人工智能&#xff08;GPT&#xff09;中文版https://ai7.pro/s/9v2um 举例说明 有表结构如下&#xff1a; users(user_id, name) bills(…

改进YOLOv8:结合ConvNeXt V2骨干网络!使用MAE共同设计和扩展ConvNet

🗝️YOLOv8实战宝典--星级指南:从入门到精通,您不可错过的技巧   -- 聚焦于YOLO的 最新版本, 对颈部网络改进、添加局部注意力、增加检测头部,实测涨点 💡 深入浅出YOLOv8:我的专业笔记与技术总结   -- YOLOv8轻松上手, 适用技术小白,文章代码齐全,仅需 …

函数调用分析

目录 函数相关的汇编指令 JMP指令 call指令 ret指令 VS2019正向分析main函数 总结调用函数堆栈变化规律 x64dbg分析调用函数 IDA分析调用函数 函数相关的汇编指令 JMP指令 JMP 指令表示的是需要跳转到哪个内存地址&#xff0c;相当于是间接修改了 EIP 。 call指令 ca…

Windows环境VSCode配置OpenCV-项目配置(二)

修改c_cpp_properties.json {"configurations": [{"name": "windows-gcc-x64","includePath": ["${workspaceFolder}/**","D:/mingw64/mingw64/include","D:/openCV_win/build/install/include","…

系列十二、线程池

一、线程池 1.1、为什么需要线程池 10年前单核CPU电脑&#xff0c;假的多线程&#xff0c;像马戏团小丑玩多个球&#xff0c;CPU需要来回切换。现在是多核电脑&#xff0c;多个线程各自跑在独立的CPU上&#xff0c;不用切换效率高。 1.2、优势 线程池做的主要工作是控制运行的…

天猫超市电商营销系统:无代码开发实现API连接集成

无代码开发实现天猫超市与电商系统的高效连接 天猫超市&#xff0c;作为天猫推出的网络零售超市&#xff0c;为广大网购消费者提供了一站式的购物服务。而通过无代码开发的方式&#xff0c;天猫超市能够实现与各种电商系统的连接和集成&#xff0c;这种方式无需进行繁琐的API开…

ESP32 http 请求

目录 参考教程1.使用的http连接2.使用Vscode-IDF创建http_request例程3.修改http_request_example_main.c函数4.已经获取到响应的数据 参考教程 ESP-IDF HTTP获取网络时间 1.使用的http连接 http://api.m.taobao.com/rest/api3.do?apimtop.common.getTimestamp请求可以得到…

【Python测试开发】:切换窗口和表单

一、多窗口切换 浏览器打开的窗口其实会有一个叫做句柄的概念。 句柄就类似于每一个标签页的ID一样&#xff0c;具有唯一性。 1.1 语法 获取当前窗口句柄&#xff0c;注意后面没有括号哦~ driver.current_window_handle获取所有窗口句柄&#xff0c;结果以列表格式存储&am…

ModBus TCP/RTU 报文解析

Modbus Tcp https://gitee.com/szwzhsz/Modbus-TCP-client-server-DotNetty.?_fromgitee_search 固定协议格式 事务标识(2byte)&#xff1a;00 00&#xff0c;可变(递增) 协议标识(2byte)&#xff1a;00 00&#xff0c;固定 长度(2byte)&#xff1a;00 06&#xff0c;可变 单…

PySide6 Tutorials (一)表格小部件魔改

前言 Pyside6官方教程给了一个使用表格显示颜色的教程&#xff0c;原教程地址如下&#xff1a;源地址&#xff0c; 结合前面button信号的学习&#xff0c;就魔改添加了如下功能&#xff1a;增加一列按钮&#xff0c;可以修改该行的颜色值&#xff0c;通过点击按钮生成指定的颜…

深度学习之生成唐诗案例(Pytorch版)

主要思路&#xff1a; 对于唐诗生成来说&#xff0c;我们定义一个"S" 和 "E"作为开始和结束。 示例的唐诗大概有40000多首&#xff0c; 首先数据预处理&#xff0c;将唐诗加载到内存&#xff0c;生成对应的word2idx、idx2word、以及唐诗按顺序的字序列。…

万字解析设计模式之代理模式

一、代理模式 1.1概述 代理模式是一种结构型设计模式&#xff0c;它允许通过创建代理对象来控制对其他对象的访问。这种模式可以增加一些额外的逻辑来控制对原始对象的访问&#xff0c;同时还可以提供更加灵活的访问方式。 代理模式分为静态代理和动态代理两种。静态代理是在编…

Day01 嵌入式 -----流水灯

一、简单介绍 嵌入式系统中的流水灯是一种常见的示例项目&#xff0c;通常用于演示嵌入式系统的基本功能和控制能力。流水灯由多个发光二极管&#xff08;LED&#xff09;组成&#xff0c;这些LED按照一定的顺序依次点亮和熄灭&#xff0c;形成一种像水流一样的流动效果。 二、…

单/三相dq解耦控制与特定次谐波抑制

1. 单相整流器dq坐标系下建模 单相整流器的拓扑如图所示&#xff0c;可知 u a b u s − L d i s d t − R i s {u_{ab}} {u_{s}} - L\frac{{d{i_s}}}{{dt}} - R{i_s} uab​us​−Ldtdis​​−Ris​。   将电压和电流写成dq的形式。 { u s U s m sin ⁡ ( ω t ) i s I …

选择「程序员」职业的8个理由

软件开发人员是具有创建软件程序的创意和技术技能的专业人员&#xff0c;是一个具有高回报和挑战性的职业选择。如今&#xff0c;软件开发人员几乎在每个行业工作。随着世界变得越来越数字化&#xff0c;越来越需要具有技术背景的人来创建特定的软件应用程序。 如果您考虑做一…

纯JS,RSA,AES,公钥,私钥生成及加解密

通过网络找的JS源文件&#xff0c;修改后使用&#xff0c;包含RSA 密匙对生成 及AES 加解密 涉及的JS源文件 下载 GitHub - cgrlancer/RSA-AES: 纯js,RSA,AES前端加解密 前端引用 import {generateRsaKeyWithPKCS8,encryptByRSA,decryptByRSA,encrypt,decrypt,testRsa} fr…

文心一言-情感关怀之旅

如何让LLM更有温度。 应用介绍

【精选】XML技术知识点合计

XML概述 概念 XML&#xff08;Extensible Markup Language&#xff09;&#xff1a;可扩展标记语言 可扩展&#xff1a;标签都是自定义的。 发展历程 HTML和XML都是W3C&#xff08;万维网联盟&#xff09;制定的标准&#xff0c;最开始HTML的语法过于松散&#xff0c;于是W…

企业要满足什么条件才能实施CRM系统?

CRM的作用相信大家也所有了解&#xff0c;但并不是所有的企业都适合实施CRM。或者说&#xff0c;大部分企业实施CRM并不会100%的成功。那么&#xff0c;企业实施CRM的条件是什么&#xff1f;下面我们就来说一说。 1、业务规模 如果您的客户数量较少&#xff0c;没有复杂的客户…

二分查找——34. 在排序数组中查找元素的第一个和最后一个位置

文章目录 1. 题目2. 算法原理2.1 暴力解法2.2 二分查找左端点查找右端点查找 3. 代码实现4. 二分模板 1. 题目 题目链接&#xff1a;34. 在排序数组中查找元素的第一个和最后一个位置 - 力扣&#xff08;LeetCode&#xff09; 给你一个按照非递减顺序排列的整数数组 nums&#…