uni-app 百度语音识别文字并展示功能实现
uni-app 使用百度语音识别文字功能
本文主要写的是 uniapp实现语音输入并展示在页面上 , 纯前端 ,不涉及后端
1. 百度语音识别申请
不啰嗦 直接点击连接进去 , 进入后点击立即使用按钮, 接着 , 直接点击第二步创建应用 , 最后选择个人后确定 , 创建成功就可以在hbuilder中配置并使用了
2. hbuilder配置百度语音识别
选择 manifest.json文件 点击app模块配置 , 找到speech语音输入 选择百度语音识别 , 再把刚刚申请的三个值传进去
3.页面实现
使用很简单 , 一个点击事件 , 一个展示识别后的文字的标签
<template> <view class="content"> <button @click="startLuyin" class="recordingStyle">按住开始说话</button> <view>识别的结果 : {{ searchText }}</view> </view> </template> <script> //录音 const recorderManager = uni.getRecorderManager(); //播放录音 const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; export default { data() { return { speechEngine: 'baidu', searchText: '', } }, methods: { startLuyin() { console.log('语音输入') let _this = this; let options = {}; options.engine = _this.speechEngine options.punctuation = false; // 是否需要标点符号 options.timeout = 10 * 1000; //超时时间 plus.speech.startRecognize(options, function(s) { console.log(s) //识别的结果 _this.searchText = s plus.speech.stopRecognize(); // 关闭 }); } } } </script> <style> .content { padding: 20px; } .recordingStyle { border-radius: 20px; text-align: center; color: #fff; font-size: 15px; background-color: #409eff; margin-bottom: 15px; } </style>
4.效果图
记得是在app上进行测试
到此这篇关于uni-app 百度语音识别文字并展示功能的文章就介绍到这了,更多相关uni-app 百度语音识别文字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
微信小程序 组件的外部样式externalClasses使用详解
这篇文章主要介绍了微信小程序里 组件的外部样式externalClasses使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09JavaScript控制listbox列表框的项目上下移动的方法
这篇文章主要介绍了JavaScript控制listbox列表框的项目上下移动的方法,实例分析了javascript操作listbox列表框的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03AngularJS实现textarea记录只能输入规定数量的字符并显示
AngularJS 是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。接下来通过本文给大家介绍AngularJS实现textarea记录只能输入规定数量的字符并显示的相关内容,需要的朋友参考下吧2016-04-04
最新评论