快捷導(dǎo)航

uni-app 百度語音識(shí)別文字并展示功能實(shí)現(xiàn)

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

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

uni-app 使用百度語音識(shí)別文字功能

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

1. 百度語音識(shí)別申請(qǐng)

不啰嗦直接點(diǎn)擊連接進(jìn)去 , 進(jìn)入后點(diǎn)擊立即使用按鈕, 接著 , 直接點(diǎn)擊第二步創(chuàng)建應(yīng)用 , 最后選擇個(gè)人后確定 , 創(chuàng)建成功就可以在hbuilder中配置并使用了

2. hbuilder配置百度語音識(shí)別

選擇 manifest.json文件點(diǎn)擊app模塊配置 , 找到speech語音輸入選擇百度語音識(shí)別 , 再把剛剛申請(qǐng)的三個(gè)值傳進(jìn)去

3.頁面實(shí)現(xiàn)

使用很簡(jiǎn)單 , 一個(gè)點(diǎn)擊事件 , 一個(gè)展示識(shí)別后的文字的標(biāo)簽

<template>
	<view class="content">
		<button @click="startLuyin" class="recordingStyle">按住開始說話</button>
		<view>識(shí)別的結(jié)果 : {{ 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; // 是否需要標(biāo)點(diǎn)符號(hào) 
				options.timeout = 10 * 1000; //超時(shí)時(shí)間
				plus.speech.startRecognize(options, function(s) {
					console.log(s) //識(shí)別的結(jié)果
					_this.searchText = s
					plus.speech.stopRecognize(); // 關(guān)閉
				});
			}
		}
	}
</script>
<style>
	.content {
		padding: 20px;
	}
	.recordingStyle {
		border-radius: 20px;
		text-align: center;
		color: #fff;
		font-size: 15px;
		background-color: #409eff;
		margin-bottom: 15px;
	}
</style>