快捷導(dǎo)航

uniapp語(yǔ)音識(shí)別（訊飛語(yǔ)音）轉(zhuǎn)文字

更新時(shí)間：2022年12月24日 15:02:33 作者：Nanchen_42

這篇文章主要介紹了uniapp語(yǔ)音識(shí)別（訊飛語(yǔ)音）轉(zhuǎn)文字,需要的朋友可以參考下

常見(jiàn)應(yīng)用：游戲界面 文字語(yǔ)音、商城導(dǎo)航欄的語(yǔ)音輸入搜索框、聊天界面的語(yǔ)音文字輸入等.

語(yǔ)音輸入接口可使得網(wǎng)頁(yè)開(kāi)發(fā)人員能快速調(diào)用設(shè)備的麥克風(fēng)進(jìn)行語(yǔ)音輸入，而不需要安裝額外的瀏覽器插件。規(guī)范不定義底層語(yǔ)音識(shí)別引擎的技術(shù)架構(gòu)，瀏覽器實(shí)現(xiàn)可基于語(yǔ)音識(shí)別服務(wù)器或本地內(nèi)置語(yǔ)音識(shí)別模塊。

配置SDK–識(shí)別訊飛語(yǔ)音（如果用不了訊飛語(yǔ)音，可換百度語(yǔ)音，自己去看接入文檔）

進(jìn)入項(xiàng)目根目錄下的 manifest.json -> App模塊配置->speech 勾選訊飛語(yǔ)音識(shí)別，如下圖所示：

在這里插入圖片描述

index.vue文件寫(xiě)入

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<button @click="voiceBegain">訊飛語(yǔ)音識(shí)別</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('這是發(fā)送驗(yàn)證碼', e);
					}
				})
			},
			// 調(diào)用訊飛語(yǔ)音識(shí)別
			voiceBegain() {
				let _this = this;
				let options = {};
				//#ifdef APP-PLUS || APP-PLUS-NVUE
				options.engine = 'iFly';
				options.punctuation = false; // 是否需要標(biāo)點(diǎn)符號(hào) 
				options.timeout = 10 * 1000; //語(yǔ)音錄入持續(xù)時(shí)長(zhǎng)
				plus.speech.startRecognize(options, function(s) {
					_this.searchText = _this.searchText + s;
					console.log(_this.searchText) //拿到語(yǔ)音識(shí)別的結(jié)果
					//下面是邏輯  
					_this.searchValue = s;
					_this.searchText = ""
					
					// 打印輸出結(jié)果
					 _this.words1 = _this.searchValue
					 _this.words2 = _this.searchText
					 
					// 關(guān)閉語(yǔ)音
					plus.speech.stopRecognize();
				});
				//#endif
				// #ifdef H5
				alert("只有h5平臺(tái)才有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>

如圖：

在這里插入圖片描述