HarmonyOS鸿蒙Next中如何通过TextReader实现当前朗读的段落内容与页面中内容相匹配以及实现自动翻页。

HarmonyOS鸿蒙Next中如何通过TextReader实现当前朗读的段落内容与页面中内容相匹配以及实现自动翻页。 想通过TextReader中当前朗读的段落内容来匹配页面中的内容，对页面中匹配的方案高亮显示，并获取到当前domPos，通过PageDataInfo中的startDomPos，endDomPos来实现自动翻页，但好像Reader Kit提供是的黑盒服务，没有对当前页面属性操作的方法。

4 回复 
@Component
export struct HighlightTextReader {

  @State text: string = '这是一段示例文本，用于演示朗读时的高亮效果。这是第二句话。这是第三句话，比较长一些，包含更多的内容。';

  @State currentSentenceIndex: number = -1;

  private textReader: TextReader = new TextReader();

  private sentences: string[] = [];

  

  aboutToAppear() {

    // 分割文本为句子

    this.sentences = this.text.split(/(?<=[。？！.?!])/);

    

    // 注册朗读状态和进度监听

    this.textReader.on('stateChange', (state) => {

      if (state === TextReader.ReadState.COMPLETED) {

        this.currentSentenceIndex = -1;

      }

    });

    

    this.textReader.on('progressChange', (progress) => {

      // 根据进度计算当前句子索引

      const sentenceCount = this.sentences.length;

      const estimatedIndex = Math.floor(progress * sentenceCount);

      if (estimatedIndex !== this.currentSentenceIndex) {

        this.currentSentenceIndex = estimatedIndex;

      }

    });

  }

  

  build() {

    Column() {

      // 显示文本，当前句子高亮

      ForEach(this.sentences, (sentence: string, index: number) => {

        Text(sentence)

          .fontSize(16)

          .fontColor(index === this.currentSentenceIndex ? '#0000FF' : '#000000')

          .fontWeight(index === this.currentSentenceIndex ? 500 : 400)

      })

      

      Button('开始朗读')

        .onClick(() => {

          const readInfo = textReaderInfo('highlight_text', this.text);

          this.textReader.start(readInfo);

        })

    }

    .width('100%')

    .padding(15)

  }

  

  aboutToDisappear() {

    this.textReader.off('stateChange');

    this.textReader.off('progressChange');

    this.textReader.stop();

  }

}

自动翻页功能：通过注册朗读状态监听当状态TextReader.ReadState.COMPLETED时，播放下一章内容

  // 注册朗读状态监听

  this.textReader.on('stateChange', (state) => {

    switch (state) {

      case TextReader.ReadState.READING:

        console.info('正在朗读...');

        this.isReading = true;

        break;

      case TextReader.ReadState.PAUSED:

        console.info('朗读已暂停');

        this.isReading = false;

        break;

      case TextReader.ReadState.COMPLETED:

        console.info('朗读已完成');

        this.isReading = false;

        this.autoPlayNext();

        break;

      case TextReader.ReadState.STOPPED:

        console.info('朗读已停止');

        this.isReading = false;

        break;

    }

  });

  

  // 注册朗读进度监听

textReader.on('stateChange', (state: TextReader.ReadState) => {

this.currentProgress = progress * 100;

  if (state === TextReader.ReadState.COMPLETED) {

    const nextPageIndex = this.currentParagraphIndex + 1;

    if (nextPageIndex < this.readInfoList.length) {

      this.currentParagraphIndex = nextPageIndex;

      this.selectedReadInfo = this.readInfoList[nextPageIndex];

      textReader.start(this.selectedReadInfo);

      this.scrollToPage(nextPageIndex); // 滚动到对应位置

    }

  }

});

更多关于HarmonyOS鸿蒙Next中如何通过TextReader实现当前朗读的段落内容与页面中内容相匹配以及实现自动翻页。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


加油，

在HarmonyOS Next中，使用TextReader实现朗读段落与页面内容匹配，需通过TextReader的on(‘play’)事件监听当前播放段落索引，结合页面文本段落数组索引同步高亮显示对应内容。自动翻页可通过on(‘finish’)事件监听段落播放完成，调用页面滚动API（如Scroller.scrollTo）定位至下一段落起始位置，实现朗读与翻页同步。

在HarmonyOS Next中，TextReader确实作为系统级服务运行，无法直接操作页面DOM元素。但可以通过以下方案实现段落匹配与自动翻页：

  1. 利用TextReader的监听回调获取当前朗读位置：
textReader.on('rangeChange', (range) => {
    const currentPos = range.startOffset;
    // 根据位置匹配页面元素
});
  1. 通过CSS选择器实现高亮：
.highlight {
    background-color: yellow;
    transition: all 0.3s;
}
  1. 自动翻页逻辑实现：
  • 预先计算每个页面的startDomPos/endDomPos
  • 监听朗读位置，当currentPos接近endDomPos时触发翻页
  • 使用pageTurner.turnToNextPage()执行翻页
  1. 关键实现步骤：
  • 建立DOM位置与朗读位置的映射关系
  • 使用getBoundingClientRect()获取元素位置
  • 通过scrollIntoView()实现滚动定位

注意：需要自行维护页面元素位置索引，TextReader仅提供朗读进度回调。建议使用Intersection Observer监听元素可见性，确保翻页时机准确。

回到顶部