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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

4.效果图

记得是在app上进行测试