Uniapp音声認識(Xunfei音声)からテキストへ

☞一般的な アプリケーション
游戏界面テキスト音声、商城导航栏音声入力検索ボックス、聊天界面音声テキスト入力など。

公式ユニクラウド公式声から引用

音声入力インターフェイスを使用すると、Web開発者は、追加のブラウザプラグインをインストールしなくても、音声入力のためにデバイスのマイクをすばやく呼び出すことができます。この仕様では、基盤となる音声認識エンジンの技術アーキテクチャは定義されていません。ブラウザの実装は、音声認識サーバーまたはローカルの組み込み音声認識モジュールに基づくことができます。

SDKの構成-Xunfei音声を認識し
ます(Xunfei音声を使用できない場合は、Baidu音声に変更して、アクセスドキュメントを自分で確認できます)
プロジェクトのルートディレクトリに移動しますmanifest.json-> App模块配置->speech次に示すように、Xunfei音声認識を確認します。
ここに写真の説明を挿入

index.vueファイル書き込み

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<button @click="voiceBegain">讯飞语音识别</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('这是发送验证码', e);
					}
				})
			},
			// 调用讯飞语音识别
			voiceBegain() {
     
     
				let _this = this;
				let options = {
     
     };
				//#ifdef APP-PLUS || APP-PLUS-NVUE
				options.engine = 'iFly';
				options.punctuation = false; // 是否需要标点符号 
				options.timeout = 10 * 1000; //语音录入持续时长
				plus.speech.startRecognize(options, function(s) {
     
     
					_this.searchText = _this.searchText + s;
					console.log(_this.searchText) //拿到语音识别的结果
					//下面是逻辑  
					_this.searchValue = s;
					_this.searchText = ""
					
					// 打印输出结果
					 _this.words1 = _this.searchValue
					 _this.words2 = _this.searchText
					 
					// 关闭语音
					plus.speech.stopRecognize();
				});
				//#endif
				// #ifdef H5
				alert("只有h5平台才有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>

示されているように:
ここに写真の説明を挿入

実行
云打包または自定义调试基座生成のapkファイル、携帯電話にインストールされたAPK、
上のクリックbuttonボタンをトリガするカスタムコールバック関数に
ここに写真の説明を挿入

このときのページ出力
ここに写真の説明を挿入
注意:
plusHBuilder実機を実行してパッケージ化した後にのみ実行する通常のブラウザ環境はありませんplus apiそれ以外の場合は、エラーが報告されます。
ここに写真の説明を挿入

おすすめ

転載: blog.csdn.net/qq_44469200/article/details/108753002