目录

  • 前言
  • 朗读控件技术概述
  • 关于朗读控件
  • 使用场景
  • 实现朗读控件
  • 自定义朗读
  • 结束语

前言

在移动应用开发中,提供信息的无障碍访问是一个重要的考虑因素,也是现在所有应用都要做的基本功能,比如残障人士模式、长者模式,而朗读控件(Text-to-Speech, TTS)就是允许应用将文本转换为语音,这对于视觉障碍用户或在需要语音反馈的场景中非常有用。其实HarmonyOS提供了强大的朗读控件支持,这使得开发者可以轻松集成这一功能,也让鸿蒙应用有了相关的功能保障。那么本文就来详细介绍如何在HarmonyOS应用中使用朗读控件,包括技术选型、实现步骤和代码示例,方便有需要的人查看使用。

朗读控件技术概述

先来介绍关于朗读控件技术的概念,朗读控件通过将文本信息转换为语音输出,帮助用户更好地获取应用中的内容。在HarmonyOS中的朗读控件支持多种语言和方言,允许开发者自定义语音的属性,如语速、音调等。鸿蒙中的Speech Kit(场景化语音服务)集成了语音类AI能力,包括朗读控件(TextReader)和AI字幕控件(AICaption)能力,便于用户与设备进行互动,为用户实现朗读文章。

关于朗读控件

在HarmonyOS中,使用朗读控件通常涉及以下步骤:
1.权限申请:在应用的配置文件中添加必要的权限。
2.创建朗读控件实例:使用系统提供的API创建朗读控件实例。
3.配置朗读参数:设置语音属性,如语言、语速和音调。
4.开始朗读:将文本内容转换为语音并输出。

使用场景

再来分享一下朗读控件的使用场景,其实不必多说就知道,朗读控件应用广泛,比如在用户不方便或者无法查看屏幕文字的时候,为用户朗读新闻,提供资讯。接着分享一下HarmonyOS中的朗读控件的接口说明,具体如下所示:

接口名描述
init(context: common.BaseContext, readParams: ReaderParam): Promise<void>初始化TextReader。
start(readInfoList: ReadInfo[], articleId?: string): Promise<void>启动TextReader。
on(type: string, callback: function): void注册所有事件回调,具体事件类型详见API参考。
ReaderParam(isVoiceBrandVisible: boolean, businessBrandInfo?: BusinessBrandInfo, isFastForward?: boolean, keepBackgroundRunning?: boolean, online?: number)朗读参数。

keepBackgroundRunning参数配置,决定是否使用保持后台运行的功能。

  • 默认false:不保持后台运行,
  • 配置为true:保持后台运行 |

实现朗读控件

接下来就是本文的重点,介绍如何在实际开发中使用朗读控件,具体步骤如下所示。

步骤1:引入文件

首先从项目根目录中进入/src/main/ets/entryability/EntryAbility.ets文件,将WindowManager添加至工程。具体操作如下所示:

import { WindowManager } from '@kit.SpeechKit';

步骤2:设置窗口管理器

然后在onWindowStageCreate(windowStage: window.WindowStage)生命周期方法中,添加setWindowStage方法设置窗口管理器。具体示例代码如下所示:

onWindowStageCreate(windowStage: window.WindowStage): void {
  console.info('Ability onWindowStageCreate');
  WindowManager.setWindowStage(windowStage);
  
  windowStage.loadContent('pages/Index', (err, data) => {
    if (err) {

      return;
    }

  });
}

步骤3:添加引入相关类

然后从项目根目录进入/src/main/ets/pages/Index.ets文件,在使用朗读控件前,将实现朗读控件和其他相关的类添加至工程。

import { TextReader, TextReaderIcon, ReadStateCode } from '@kit.SpeechKit';

步骤4:设置布局

接着进行简单配置页面的布局,加入听筒图标,并且设置onClick点击事件。具体操作如下所示:

// 播放状态
@State readState: ReadStateCode = ReadStateCode.WAITING;

build() {
    Column() {
      TextReaderIcon({ readState: this.readState })
        .margin({ right: 20 })
        .width(32)
        .height(32)
        .onClick(async () => {
            // 设置点击事件
            // ...
        })
    }
}

步骤5:初始化控件

然后初始化朗读控件,具体操作步骤如下所示:

// 用于显示当前页的按钮状态
@State isInit: boolean = false;

// 初始化朗读控件
const readerParam: TextReader.ReaderParam = {
  isVoiceBrandVisible: true,
  businessBrandInfo: {
    panelName: '小艺朗读'
  }
}
try{
  await TextReader.init(getContext(this), readerParam);
  // 是否初始化,用于显示听筒按钮的状态
  this.isInit = true;
} catch (err) {

}

步骤6:设置监听

然后就是设置监听操作,这个是可选的非必需的,在用户与控件进行交互时触发回调通知开发者。注销监听,监听结束后进行释放。具体操作如下所示:

// 设置监听
setActionListener() {
  TextReader.on('setArticle', async (id: string) => { console.info(`setArticle ${id}`) });
  TextReader.on('clickArticle', (id: string) => {console.info(`onClickArticle ${id}`) });
  TextReader.on('clickAuthor', (id: string) => { console.info(`onClickAuthor ${id}`) });
  TextReader.on('clickNotification',  (id: string) => { console.info(`onClickNotification ${id}`) });
  TextReader.on('showPanel', () => { console.info(`onShowPanel`) });
  TextReader.on('hidePanel', () => { console.info(`onHidePanel`) });
  TextReader.on('stateChange', (state: TextReader.ReadState) => {
    this.onStateChanged(state)
  });
  TextReader.on('requestMore', () => {
    TextReader.loadMore(this.newData, true)
  });
}
// 注销监听
releaseActionListener() {
  TextReader.off('setArticle');
  TextReader.off('clickArticle');
  TextReader.off('clickAuthor');
  TextReader.off('clickNotification');
  TextReader.off('showPanel');
  TextReader.off('hidePanel');
  TextReader.off('stateChange');
  TextReader.off('requestMore');
}

步骤7:验证朗读
接着就是验证,初始化完成,加载文章列表,启动朗读控件。在列表页无更多内容时,会显示加载失败,需要requestMore监听中调一下loadMore函数以获得正确的显示信息。具体操作如下所示:

// 加载文章列表,启动朗读控件
const readInfoList: TextReader.ReadInfo[] = [{
  id: '001',
  title: {
    text:'爱的飞行日记',
    isClickable:true
  },
  author:{
    text:'周杰伦',
    isClickable:true
  },
  date: {
    text:'2024/12/01',
    isClickable:false
  },
  bodyInfo: '为爱飞行,脱离地心引力的热情'
}];
TextReader.start(readInfoList).then(() => {

}).catch((err: BusinessError) => {

})

步骤8:配置长时任务

最后就是配置长时任务,这个也是可选非必选的选项。若要配置长时任务,需要在module.json5配置文件中添加ohos.permission.KEEP_BACKGROUND_RUNNING权限,并且加入backgroundModes选项,确保朗读控件后台播报正常。具体操作如下所示:

{
  "module": {
    // ...
    "requestPermissions": [
      {
        "name": "ohos.permission.KEEP_BACKGROUND_RUNNING",
        "usedScene": {
          "abilities": [
            "FormAbility"
          ],
          "when": "inuse"
        }
      }
    ],
    "abilities": [
      {
        // ...
        "backgroundModes": [
          "audioPlayback"
        ],
        // ...
      }
    ]
  }
}

自定义朗读

除了上面介绍的朗读控件基本的朗读功能,开发者还可以根据应用的需求自定义朗读控件行为,比如:

  • 监听朗读事件:通过接口,监听朗读开始、结束或错误事件。
  • 动态调整朗读参数:根据用户的反馈动态调整语速和音调。

结束语

不用多讲,想必也清楚了朗读控件是HarmonyOS开发中的一项重要功能,它为应用提供了无障碍访问的能力。通过本文的介绍,大家应该也了解了如何在HarmonyOS应用中实现朗读控件功能,在后面的实际开发中会积极使用该功能。随着技术的不断发展,朗读控件将在HarmonyOS生态中扮演越来越重要的角色,为用户带来更加丰富和便捷的体验,同时也希望越来越多的开发者去做鸿蒙原生应用的开发实践。


灵芸小骏
8.1k 声望550 粉丝

移动开发者。