一、DEMO思路
在这个HarmonyOS NEXT原生应用DEMO中，我们将使用ArkTS开发语言创建一个简单的AI智能语音播报应用。
该应用能够接收用户输入的文本，并使用TTS（Text-To-Speech，文本转语音）技术将文本转换为语音进行播报。
当然除了基本的文本输入和播报功能外，我们还增加了语音识别的功能，允许用户通过语音输入要播报的文本。
还优化了用户界面，增加了更多的交互元素和视觉反馈。
二、实现代码
import { TextInput, Button, Toast, Flex, Image } from '@ohos.arkui';
import tts from '@ohos.multimedia.tts';
import asr from '@ohos.multimedia.asr'; // 引入语音识别模块
@Entry
@Component
struct AISpeechDemo {
@State userInput: string = '';
@State isListening: boolean = false;
// 语音识别成功回调
onRecognitionSuccess = (result: string) => {
this.userInput = result;
Toast.show('语音识别成功');
this.stopListening(); // 停止监听
};
// 语音识别失败回调
onRecognitionError = (error: any) => {
Toast.show(`语音识别失败: ${error.message}`);
this.stopListening(); // 停止监听
};
// 开始语音识别
startListening = () => {
if (!this.isListening) {
asr.startRecognition({
language: 'zh-CN',
onVolumeChanged: (volume: number) => {
// 可以在这里添加音量变化的视觉反馈
},
onResult: (result: any) => {
this.onRecognitionSuccess(result.text);
},
onError: (error: any) => {
this.onRecognitionError(error);
},
onStateChanged: (state: string) => {
if (state === 'LISTENING') {
this.isListening = true;
} else if (state === 'IDLE') {
this.isListening = false;
}
}
});
}
};
// 停止语音识别
stopListening = () => {
if (this.isListening) {
asr.stopRecognition();
this.isListening = false;
}
};
// 播报文本
speakText = () => {
if (this.userInput.trim() !== '') {
tts.speak({
text: this.userInput,
language: 'zh-CN',
pitch: 1.0,
rate: 1.0,
volume: 1.0,
onSuccess: () => {
Toast.show('播报成功');
},
onError: (error) => {
Toast.show(`播报失败: ${error.message}`);
}
});
} else {
Toast.show('请输入文本');
}
};
build() {
Flex({ direction: FlexDirection.Column, align: ItemAlign.Center, justify: FlexJustify.Center }) {
TextInput({
placeholder: '请输入或语音输入要播报的文本',
text: this.userInput,
onChange: (value) => {
this.userInput = value;
},
disabled: this.isListening // 当正在语音识别时，禁用文本输入框
}).width('100%').margin({ top: '16vp' })
// 语音识别按钮
Button('语音输入')
.onClick(() => {
if (!this.isListening) {
this.startListening();
(this.$node as any).findComponentById('mic-icon').$element().style.display = 'block';
}
})
.margin({ top: '16vp' })
.id('voice-button')
// 麦克风图标，用于视觉反馈
Image($r('app/common/resources/mic.png')) // 替换为实际的麦克风图标资源路径
.width('48vp').height('48vp')
.id('mic-icon')
.style({ display: 'none' }) // 初始隐藏
// 播报按钮
Button('播报')
.onClick(this.speakText)
.margin({ top: '16vp' })
}
}
}
三、效果说明
文本输入与播报：用户仍然可以通过文本输入框输入要播报的文本，并点击“播报”按钮进行播报。
语音识别：用户点击“语音输入”按钮后，应用将开始监听用户的语音输入。此时，麦克风图标将显示，表示正在监听。语音识别成功后，输入的文本将自动填充到文本输入框中，并弹出“语音识别成功”的提示框。用户可以点击“播报”按钮进行播报。
视觉反馈：在语音识别过程中，麦克风图标将显示，为用户提供视觉反馈。当语音识别结束时，图标将隐藏。
错误处理：无论是语音识别还是文本播报过程中发生错误，都会弹出相应的错误信息提示框，帮助用户了解问题所在。
我们可以根据实际需求进一步定制和扩展应用的功能。