HarmonyOS NEXT 应用开发练习：AI智能语音播报

一、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' })}}
}

三、效果说明

文本输入与播报：用户仍然可以通过文本输入框输入要播报的文本，并点击“播报”按钮进行播报。

语音识别：用户点击“语音输入”按钮后，应用将开始监听用户的语音输入。此时，麦克风图标将显示，表示正在监听。语音识别成功后，输入的文本将自动填充到文本输入框中，并弹出“语音识别成功”的提示框。用户可以点击“播报”按钮进行播报。

视觉反馈：在语音识别过程中，麦克风图标将显示，为用户提供视觉反馈。当语音识别结束时，图标将隐藏。

错误处理：无论是语音识别还是文本播报过程中发生错误，都会弹出相应的错误信息提示框，帮助用户了解问题所在。

我们可以根据实际需求进一步定制和扩展应用的功能。