目录

TextReaderIconV2 (Speaker Icon)

The speaker icon can be loaded as a dynamic component and configured as the main entry of the playback panel.

When an app uses the state management V1 decorator in ArkTS, the TextReaderIcon component API is required to start the speaker icon. When an app uses the state management V2 decorator in ArkTS, the TextReaderIconV2 component API is required to start the speaker icon.

Since: 6.1.1(24)

Modules to Import

import { TextReaderIconV2, UpReadState } from '@kit.SpeechKit';

UpReadState

type UpReadState = (readState:ReadStateCode)=>void

Callback used by the speaker icon component to trigger the parent component to update its state.

Atomic service API: This API can be used in atomic services since API version 6.1.1(24).

System capability: SystemCapability.AI.Component.TextReader

Model restriction: This API can be used only in the stage model.

Since: 6.1.1(24)

Parameters

Name Type Mandatory Description
readState ReadStateCode Yes Reading status.

TextReaderIconV2

Speaker icon, which can be loaded as a dynamic component. The onClick callback is set to start the TextReader when a user taps the speaker icon.

Decorator: @ComponentV2

Atomic service API: This API can be used in atomic services since API version 6.1.1(24).

System capability: SystemCapability.AI.Component.TextReader

Model restriction: This API can be used only in the stage model.

Since: 6.1.1(24)

Parameters

Name Type Mandatory Decorator Type Description
readState ReadStateCode Yes @Param

Reading status.

NOTE

readState uses @Param decorator: parent-child unidirectional synchronization.
upReadState UpReadState Yes @Event

Callback used to update the reading status.

NOTE

upReadState uses @Event decorator: child component triggering parent component status update through a callback function.

[h2]build

build(): void

Constructor used to create a TextReaderIconV2 object.

Atomic service API: This API can be used in atomic services since API version 6.1.1(24).

System capability: SystemCapability.AI.Component.TextReader

Model restriction: This API can be used only in the stage model.

Since: 6.1.1(24)

Example

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

@Entry
@ComponentV2
struct Index {

  /**
   * Articles to be loaded
   */
  @Local readInfoList: TextReader.ReadInfo[] = [];
  @Local selectedReadInfo: TextReader.ReadInfo = this.readInfoList[0];

  /**
   * Reading status
   */
  @Local readState: ReadStateCode = ReadStateCode.WAITING;

  /**
   * Initialization status
   */
  @Local isInit: boolean = false;

  async aboutToAppear(){
    /**
     * Data loading
     */
    let readInfoList: TextReader.ReadInfo[] = [{
      id: '001',
      title: {
        text:'*Title of the text to read*',
        isClickable:true
      },
      author:{
        text:'*Author of the text to read*',
        isClickable:true
      },
      date: {
        text:'2024/01/01',
        isClickable:false
      },
      bodyInfo: '*Text body to read*'
    }];
    this.readInfoList = readInfoList;
    this.selectedReadInfo = this.readInfoList[0];
    await this.init();
  }

  /**
   * Initialization
   */
  async init() {
    const readerParam: TextReader.ReaderParam = {
      isVoiceBrandVisible: true,
      businessBrandInfo: {
        panelName: 'AI Reader',
        panelIcon: $r('app.media.startIcon')
      }
    };
    try {
      let context: Context | undefined = this.getUIContext().getHostContext()
      if (context) {
        await TextReader.init(context, readerParam);
        this.isInit = true;
      }
    } catch (err) {
      console.error(`TextReader failed to init. Code: ${err.code}, message: ${err.message}`);
    }
  }

  // Set action listeners.
  setActionListener() {
    TextReader.on('stateChange', (state: TextReader.ReadState) => {
      this.onStateChanged(state);
    });
       TextReader.on('requestMore', () => {
      TextReader.loadMore([], true);
    });
  }

  onStateChanged = (state: TextReader.ReadState) => {
    if (this.selectedReadInfo?.id === state.id) {
      this.readState = state.state;
    } else {
      this.readState = ReadStateCode.WAITING;
    }
  };
  
  updateReadState: UpReadState = (readState: ReadStateCode) => {
    this.readState = readState
    console.info(`TextReader new readState:${readState}`)
  }

  build() {
    Column() {
      TextReaderIconV2({ readState: this.readState,upReadState:this.updateReadState})
        .margin({ right: 20 })
        .width(32)
        .height(32)
        .onClick(async () => {
          try {
            this.setActionListener();
            await TextReader.start(this.readInfoList, this.selectedReadInfo?.id);
          } catch (err) {
            console.error(`TextReader failed to start. Code: ${err.code}, message: ${err.message}`);
          }
        })
    }
    .height('100%')
  }
}

The following figures show the component.

Idle

Playing