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