目录

TextReaderIcon (Speaker Icon)

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

Since: 5.0.0(12)

Modules to Import

import { TextReaderIcon } from '@kit.SpeechKit';

TextReaderIcon

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: @Component

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

System capability: SystemCapability.AI.Component.TextReader

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

Since: 5.0.0(12)

Parameters:

Name Type Mandatory Decorator Type Description
readState ReadStateCode Yes @Link

Reading status.

NOTE

readState uses @Link decorator: parent-child bidirectional synchronization.

[h2]build

build(): void

Constructor used to create a TextReaderIcon object.

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

System capability: SystemCapability.AI.Component.TextReader

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

Since: 5.0.0(12)

Example:

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

@Entry
@Component
struct Index {

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

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

  /**
   * Initialization status
   */
  @State 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;
    }
  };

  build() {
    Column() {
      TextReaderIcon({ readState: this.readState })
        .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