11-HarmonyOS5-SpeechKit-TextReader-Case

Case Study of SpeechKit Text Reading Function in HarmonyOS 5.0 Abstract This article introduces how to use @kit.SpeechKit to implement the text reading function in HarmonyOS 5.0. By creating the SpeechKitTextReader component, users can perform text reading operations and monitor changes in the reading status.

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

@Entry @Component struct SpeechKitTextReader { @State readState: ReadStateCode = ReadStateCode.WAITING; list: TextReader.ReadInfo[] = [ { id: '10001', title: { text: 'Northeast China in March', isClickable: false }, author: { text: 'HarmonyOS Developer', isClickable: false }, date: { text: '2025-06-16', isClickable: false }, bodyInfo: 'In March at 45 degrees north latitude, time ties a gentle knot here. The morning mist by the Songhua River wraps fine snow, carving each branch into transparent glass. Ice crystals stack on the branches to form thousand - petaled magnolias. What rustles down when the wind passes through the branches is not snowflakes, but clearly the debris of stars falling into the world.' } ] item = this.list[0]

  async aboutToAppear(): Promise<void> { 
    const readerParam: TextReader.ReaderParam = { 
      isVoiceBrandVisible: true, 
      businessBrandInfo: { 
        panelName: 'XiaoYi Reading' 
      } 
    } 
    await TextReader.init(getContext(this), readerParam); 
    TextReader.on('stateChange', (state) => { 
      if (this.item.id === state.id) { 
        this.readState = state.state; 
      } else { 
        this.readState = ReadStateCode.WAITING; 
      } 
    }) 
  } 

  async reading() { 
    await TextReader.start(this.list, this.item.id) 
  } 

  aboutToDisappear(): void { 
    TextReader.release() 
  } 

  build() { 
    Column({ space: 15 }) { 
      Row() { 
        Blank() 
        TextReaderIcon({ readState: this.readState }) 
          .onClick(() => { 
            this.reading() 
          }) 
      } 
      .width('100%') 

      Text(this.list[0].bodyInfo) 
    } 
    .padding(15) 
    .height('100%') 
    .width('100%') 
  } 
}