鸿蒙 文本朗读控件TextReader

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

TextReader是HarmonyOS提供的强大文本朗读控件，集成在SpeechKit能力中，专为实现高效、流畅的文本转语音(TTS)功能而设计。

一、组件核心能力

TextReader作为HarmonyOS原生AI场景化控件，核心功能如下：

1. 多语音支持：内置多种语音品牌和音色选择，支持自定义语音参数（语速/音量/音调） 
2. 完整播放控制：提供开始、暂停、继续、停止、进度跳转等精细化控制 
3. 智能状态管理：实时监听朗读状态（准备中/播放中/暂停/完成等） 
4. 批量处理能力：支持多篇文章连续朗读，自动处理队列 
5. 弱网优化：特殊网络环境下仍可保持稳定播报 

二、技术实现

1. 模块集成

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

需在oh-package.json5中添加依赖：

"dependencies": {
  "@kit.SpeechKit": "^1.0.0"
}

2. 核心接口说明

接口	功能描述	典型场景
init()	初始化朗读引擎	应用启动时调用
start()	开始朗读	用户点击播放按钮
pause()	暂停朗读	暂停当前播放
stop()	停止朗读	结束当前会话
on()	事件监听	状态变更回调
setAudioOptions()	音频策略设置	解决焦点冲突

三、开发流程

1. 基础使用流程

// 初始化配置
const readerParam: TextReader.ReaderParam = {
  isVoiceBrandVisible: true,
  businessBrandInfo: { panelName: '小艺朗读' }
};

// 启动朗读
const readInfo: TextReader.ReadInfo = {
  id: 'article_1',
  title: { text: '标题', isClickable: false },
  bodyInfo: '朗读正文内容...' 
};

TextReader.init(context, readerParam)
  .then(() => TextReader.start([readInfo]))
  .catch(err => console.error(`初始化失败: ${err.code}`));

2. 高级功能实现

分段朗读控制：

// 创建分段内容
const sections = [
  { id: 'sec1', text: '第一段内容' },
  { id: 'sec2', text: '第二段内容' }
];

// 监听段落切换
TextReader.on('setArticle', (id: string) => {
  console.log(`当前朗读段落: ${id}`);
});

音频焦点管理（避免与其他音频冲突）：

// 方法1：设置共享模式
TextReader.setAudioOptions({
  audioInterruptMode: audio.AudioInterruptMode.SHARE_MODE
});

// 方法2：使用AVSession
avSession.createAVSession(context, 'tts', 'audio')
  .then(session => {
    session.setAudioFocusType(avSession.AudioFocusType.SHARABLE);
  });

四、开发实例

1. 小说阅读 

@Component
export struct NovelPage {
  @State readInfoList: TextReader.ReadInfo[] = [];
  
  aboutToAppear() {
    // 生成章节朗读数据
    for (let i = 1; i <= 10; i++) {
      this.readInfoList.push({
        id: `chapter_${i}`,
        bodyInfo: this.getChapterContent(i)
      });
    }
  }
  
  build() {
    Column() {
      TextReaderIcon({ readState: ReadStateCode.PLAYING })
        .onClick(() => TextReader.start(this.readInfoList))
    }
  }
}

2. 新闻播报

// 实现锁屏播报
TextReader.on('stateChange', (state: TextReader.ReadState) => {
  if (state.state === 'playing') {
    window.setWindowKeepAlive(true);  // 保持后台运行
  }
});