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

三、效果说明

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

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

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

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

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