uniapp语音识别（讯飞语音）转文字

常见应用：游戏界面 文字语音、商城导航栏的语音输入搜索框、聊天界面的语音文字输入等.

引自官方 unicloud官方语音：

语音输入接口可使得网页开发人员能快速调用设备的麦克风进行语音输入，而不需要安装额外的浏览器插件。规范不定义底层语音识别引擎的技术架构，浏览器实现可基于语音识别服务器或本地内置语音识别模块。

配置SDK–识别讯飞语音（如果用不了讯飞语音，可换百度语音，自己去看接入文档）

进入项目根目录下的 manifest.json -> App模块配置->speech 勾选 讯飞语音识别，如下图所示：

index.vue文件写入

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<button @click="voiceBegain">讯飞语音识别</button>
		<view v-if="words1">
			这是searchValue：{{words1}}
		</view>
		<view v-if="words2">
			这是searchText：{{words2}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				words1: '',
				words2: ''
			}
		},
		onLoad() {

		},
		methods: {
			send() {
				uniCloud.callFunction({
					name: 'sendcode',
					success: (e) => {
						console.log('这是发送验证码', e);
					}
				})
			},
			// 调用讯飞语音识别
			voiceBegain() {
				let _this = this;
				let options = {};
				//#ifdef APP-PLUS || APP-PLUS-NVUE
				options.engine = 'iFly';
				options.punctuation = false; // 是否需要标点符号
				options.timeout = 10 * 1000; //语音录入持续时长
				plus.speech.startRecognize(options, function(s) {
					_this.searchText = _this.searchText + s;
					console.log(_this.searchText) //拿到语音识别的结果
					//下面是逻辑
					_this.searchValue = s;
					_this.searchText = ""

					// 打印输出结果
					 _this.words1 = _this.searchValue
					 _this.words2 = _this.searchText

					// 关闭语音
					plus.speech.stopRecognize();
				});
				//#endif
				// #ifdef H5
				alert("只有h5平台才有alert方法")
				// #endif
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

如图：

运行云打包或自定义调试基座生成 apk 文件，apk安装到手机上;

点击button按钮，触发自定义回调函数

此时页面输出

注意：

普通浏览器里没有 plus 环境，只有 HBuilder 真机运行和打包后才能运行plus api。否则报错：

以上就是uniapp语音识别（讯飞语音）转文字的详细内容，更多关于uniapp语音识别（讯飞语音）转文字的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 使用uniapp打包上架微信小程序完整教程

    首先打开manifest.json下的微信小程序配置 ,勾选所有 点击“发行” 点击发行 这时候就会跳转到微信小程序中,如果没出现以下错误可以跳过此步骤 在本地设置中勾选“不校验合法域名........” 输入版本号和备注后点击上传   在微信小程序官网中点击“版本管理”,下面有个刚刚的开发版本 点击提交审核 填写信息 直接提交会出现以下问题 点击我知道了,再次点击 “更新当前版本的用户隐私协议” 进入后填写以下信息 填写完成后返回再次提交 以上就是使用uniapp打包上架微信小程序完整教程的详

  • uniapp实现h5、app与微信小程序三端pdf文件下载和预览功能

    以下代码兼容三端,app,h5,微信小程序,经过个人测试 手机端有两种方法,使用renderjs或者uniapp的api 两者的区别 使用renderjs的写法,会提示用户是否下载文件,下载完成后用户需要手动点击下载的文件,才会打开文件 使用uniapp的api则可以直接下载并直接预览,不需要用户操作 根据场景需求进行选择即可 <template> <div> <!-- #ifdef APP-PLUS --> <button @click="test.e

  • uniapp打包安卓App的两种方式(云打包、本地打包)方法详解

    在HBuilder上对APP提供了两种打包方式,云打包和本地打包,下面主要对这两种打包方式做个介绍 两者的区别:云打包相对简单,但是每天最多只能打包五次,而且在高峰期打包时间可能会很长,本地打包相对比较复杂,但是不限制次数,打包时间也短 一. uniapp云打包安卓App: 只需要设置相应参数即可.比较复杂的地方可能就是证书,如果你是测试包,Android的话直接选择共用证书即可,ios则需要申请相应证书,申请证书的具体方法官方也介绍的很清楚了,就不赘述了. 二. uniapp本地打包安卓App

  • uniapp微信小程序打卡功能的详细实现流程

    uniapp微信小程序打卡功能的详细实现流程

    目录 一.vue后台地图选地点 step1| 注册账号并申请Key step2| 设置 JSAPI 安全密钥的脚本标签 step3| 地图选点页面demo 二.uniapp微信小程序打卡 step1| 获取key step2| manifest.json中配置权限 step3| 获取定位地址与经纬度 三.核心流程描述 总结 一.vue后台地图选地点 step1| 注册账号并申请Key 请参考链接注册账号并申请Key 部分 step2| 设置 JSAPI 安全密钥的脚本标签 注意事项: 必须在vu

  • 手把手教你写一个uniapp通用页面组件

    目录 前言 需求 开发 初始化页面数据 实现状态栏与底部配置 页面使用 总结 前言 做移动端项目时为了兼容各种手机型号的界面,最好有一个统一的页面组件对样式做统一处理,例如:判断是否显示状态栏,是否显示头部导航,是否空出底部区域等等,本篇会带大家从零到一开发一个 uniapp 的通用页面组件 需求 本次开发的页面,组件,需要完成以下功能 可配置控制是否显示原生导航,显示状态栏,并且也可以控制状态栏颜色 可配置控制是否留出底部固定区域 开发 初始化页面数据 编写页面组件类,获取系统配置,初始化样式

  • uniapp使用高德地图的超详细步骤

    目录 1.项目前准备 2.页面创建引入 3.地图实现js 4.地图实现单点标记 5.地图实现终点与起点标记 6.最后 上代码~ 总结 1.项目前准备 1.1.首先你需要去申请一个属于自己的高德地图key,怎么申请暂不多说需要的去官网看 1.2.链接: 高德地图申请key直通车,点击前往. 有一个uniapp项目. 2.页面创建引入 新建一个uniapp的空白页 使用web-view 渲染html文件页 <web-view src="/hybrid/html/adminr.html"

  • uniapp开发打包多端应用完整方法指南

    一.uni-app项目介绍 用uni-app开发多端项目,一套代码可同时打包出各端小程序.h5和app,uni-app支持通过 HBuilderX可视化界面 和 vue-cli命令行 两种方式创建项目,下面示例项目采用 HBuilderX可视化界面 的方式创建,cli项目可参考uni文档,大部分流程都是通用的. 项目结构: ├── components 公用组件 ├── libs 公共方法 ├── pages 页面 ├── static 本地静态资源,注意:静态资源只能存放于此 ├── stor

  • uniapp页面间传参的几种方法实例总结

    目录 前言 一.上级页面 → 下级页面(单向) uni.navigateTo:URL编程式传参 <navigator>标签传参 二.上级页面 ← 下级页面(单向) uni.$on(eventName,callback):监听事件 触发事件 三.上级页面 ↔ 下级页面(双向) 上级页面内代码 总结 前言 在Uniapp中的传参主要分为以下三种类型: 上级页面 → 下级页面(单向)上级页面 ← 下级页面(单向)上级页面 ↔ 下级页面(双向) 本文将围绕这三种传参展开,分享其使用方法以及我使用中所遇

  • uniapp使用条件编译#ifdef（跨平台设备兼容）

    uni-app 已将常用的组件.JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足. 但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况. 大量写 if else,会造成代码执行性能低下和管理混乱. 编译到不同的工程后二次修改,会让后续升级变的很麻烦. 在 C 语言中,通过 #ifdef.#ifndef的方式,为 windows.mac等不同 os 编译不同的代码. uni-app 参考这个思路,为 uni-app 提供了条件编译手

  • Android基于讯飞语音SDK实现语音识别

    Android基于讯飞语音SDK实现语音识别

    一.准备工作 1.你需要android手机应用开发基础 2.科大讯飞语音识别SDK android版 3.科大讯飞语音识别开发API文档 4.android手机 关于科大讯飞SDK及API文档,请到科大语音官网下载:http://www.xfyun.cn/ 当然SDK和API有多个版本可选,按照你的需要下载,其次,下载需要填写资料申请注册,申请通过或可获得Appid 如下图,申请一个APPID,就可以了. 二.语音识别流程 1.创建识别控件 函数原型 Public RecognizerDialo

  • 为textView添加语音输入功能的实例代码(集成讯飞语音识别)

    非常感谢大家利用自己宝贵的时间来阅读我的文章 , 今天给大家带来的是一个集成讯飞语音识别功能的小demo,为textview添加一个语音输入的功能,相信在这个智能化趋势的大环境的下,很多人能用得到这个功能.如果需要的话希望能帮到你 , 当然, 有任何不妥的地方 欢迎指正. 先上demo --->XunFeiDemo 效果展示: 功能实现,sdk中提供了两种方式,一种是带界面的语音识别,有一个识别语音的动画的界面效果.另一种是无界面的.我这里使用的是带界面的,不带界面的自己可以去看一下,大同小异

  • python3实现语音转文字(语音识别)和文字转语音(语音合成)

    话不多说,直接上代码运行截图  1.语音合成 -------> 执行: 结果: 输入要转换的内容,程序直接帮你把转换好的mp3文件输出(因为下一步–语音识别–需要.pcm格式的文件,程序自动执行格式转换,同时生成17k.pcm文件,暂时不用管,(你也可以通过修改默认参数改变文件输出的位置,名称及是否进行pcm转换 <------- 2.语音处理 ----> 方便起见, 我们直接运行语音处理程序,识别我们上一步的17k.pcm文件: What?识别居然出现了点错误,不过不用担心,博主已经调

  • 基于Python实现语音识别和语音转文字

    基于Python实现语音识别和语音转文字

    目录 前言 直接使用 获取权限 1.环境准备 2.获取权限 代码实现 1.获取access_token 2.获取转换后音频 3.配置接口参数 4.完整demo 5.执行 前言 嗨嗨,大家好呀 ~ 今天给你们分享一个有趣的东西 ~ 是一个语音识别跟语音转文字的小工具 感兴趣的朋友可以继续往下滑咯 直接使用 在1.2官网注册后拿到APISecret和APIKey, 直接复制文章2.4demo代码, 保存为online_tts.py, 在命令行执行 python online_tts.py -clie

  • 详解Android studio实现语音转文字功能

    详解Android studio实现语音转文字功能

    目录 一.在科大讯飞的官网上注册并下载SDK 二.配置安卓项目 三.运行效果展示 一.在科大讯飞的官网上注册并下载SDK 1.首先去讯飞开放平台申请一个账号(https://www.xfyun.cn/),然后点击“控制台”进入新的页面,创建一个应用,找到“语音听写”,下载相应的SDK. 文件解压后内容如下: 二.配置安卓项目 1.在android studio中新建一个空项目,将libs文件夹中的内容复制到安卓项目的libs文件夹下,其中msc.jar要右键添加Add As Library: 2

  • python教程十行代码教你语音转文字QQ微信聊天

    python教程十行代码教你语音转文字QQ微信聊天

    目录 QQ语音识别 微信语音 读取文件 识别本地文件 QQ和微信这两款都是非常受人喜欢的聊天交友软件!可能大家平时没有留意到,也或者是大家可能很少用微信,或者很少用QQ吧!所以可能没有留意这些小细节! 截图是没发现微信的语音识别在哪里!可能是小编微信玩少了吧,一般情况来讲都是不玩微信的! QQ语音识别 微信语音 要调用百度AI开放平台的API,首先需要一个百度账号.我想注册百度账号的过程应该不用向大家详细介绍了,大家应该在这边都是没啥问题的.需要注意的是,百度账号的安全性挺差的,不知为啥本人的账

  • 百度语音识别(Baidu Voice) Android studio版本详解

    百度语音识别(Baidu Voice) Android studio版本 已同步更新至个人blog:http://dxjia.cn/2016/02/29/baidu-voice-helper/ 最近在一个练手小项目里要用到语音识别,搜索了一下,比较容易集成的就算Baidu voice跟讯飞语音了,baidu提供了直接可以使用的显示控件,而讯飞需要自己实现,另外baidu提供每天5W次的调用频率,对于我来说足够使用啦.所以就选择使用Baidu Voice(控件会有baidu logo和关键字,所以

  • Android利用Flutter path绘制粽子的示例代码

    Android利用Flutter path绘制粽子的示例代码

    目录 前言 绘制 基本轮廓 粽叶 嘴巴 眼睛 腮红 手&脚 头巾 咸甜是一家 发声 动画控制嘴巴开合 用到的技术点 总结 前言 大家好,端午将至,首先提前祝小伙伴端午安康,端午作为中华民族的非常重要的传统节日,粽子那是必不可少的,但是你真的知道粽子的历史吗? 今天跟随本篇文章用Flutter path画一个会科普节日的的粽子吧- 绘制 基本轮廓 首先我们需要将粽子的基本轮廓绘制出来,通过图片可以看到粽子的轮廓是一个圆圆的三角形状, 本篇文章所有的图形都是用纯Path路径制作,这里我们可以将粽子的

  • iOS的音频文件的格式转换示例

    背景 因为我的公司需要设计到app与硬件的通信,所以去年深入的研究了一下音频各种格式的转换,曾写过一篇简书,现在搬过来丰富下自己的blog. 首先介绍一下常用的音频文件格式 .amr:体积很小,1秒到约为1kb,所以音质缩水也很厉害,一般用于手机铃声或彩信 .mp3:比较流行的,有损音频,某些部分失真,,音质随码率的提高,越高越好 .wav:为无损音频 .pcm:无损的wav文件中音频数据的一种编码方式 由于App是通过AVAudioRecorder录制音频,默认格式为pcm,文件比较大,所以不

  • 详解Android代码混淆实战

    什么是代码混淆: Android SDK 自带了混淆工具Proguard.它位于SDK根目录\tools\proguard下面.如果开启了混淆,Proguard默认情况下会对所有代码,包括第三方包都进行混淆,可是有些代码或者第三方包是不能混淆的,这就需要我们手动编写混淆规则来保持不能被混淆的部分. 为什么要混淆: 优化java的字节码 减小apk文件的大小,在混淆过程中会删除未使用过的类和成员 代码安全,使类.函数.变量名随机变成无意义的代号形如:a,b,c...之类.防止app被反编译之后能够

随机推荐