uni-app 百度語音識別文字并展示功能實現

更新時間：2023年12月23日 11:36:35 作者：洪洪呀

這篇文章主要介紹了uni-app 百度語音識別文字并展示功能實現,本文主要寫的是 uniapp實現語音輸入并展示在頁面上,純前端,不涉及后端,需要的朋友可以參考下

uni-app 使用百度語音識別文字功能

本文主要寫的是 uniapp實現語音輸入并展示在頁面上 , 純前端 ,不涉及后端

1. 百度語音識別申請

不啰嗦直接點擊連接進去 , 進入后點擊立即使用按鈕, 接著 , 直接點擊第二步創(chuàng)建應用 , 最后選擇個人后確定 , 創(chuàng)建成功就可以在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>