鸿蒙应用开发之场景化语音服务朗读控件基础

一、工具

DevEco Studio

二、项目介绍

开发步骤
首先从项目根目录进入/src/main/ets/entryability/EntryAbility.ets文件，将WindowManager添加至工程。
import { WindowManager } from '@kit.SpeechKit';
在onWindowStageCreate(windowStage: window.WindowStage)生命周期方法中，添加setWindowStage方法设置窗口管理器。
onWindowStageCreate(windowStage: window.WindowStage): void {
  console.info('Ability onWindowStageCreate');
  WindowManager.setWindowStage(windowStage);
  
  windowStage.loadContent('pages/Index', (err, data) => {
    if (err) {
      console.error(`Failed to load the content. Code: ${err.code}, message: ${err.message}`);
      return;
    }
    console.info(`Succeeded in loading the content. Data: ${JSON.stringify(data)}.` );
  });
}
从项目根目录进入/src/main/ets/pages/Index.ets文件，在使用朗读控件前，将实现朗读控件和其他相关的类添加至工程。
import { TextReader, TextReaderIcon, ReadStateCode } from '@kit.SpeechKit';
简单配置页面的布局，加入听筒图标，并且设置onClick点击事件。
/**
 * 播放状态
 */
@State readState: ReadStateCode = ReadStateCode.WAITING;

build() {
    Column() {
      TextReaderIcon({ readState: this.readState })
        .margin({ right: 20 })
        .width(32)
        .height(32)
        .onClick(async () => {
            // 设置点击事件
            // ...
        })
    }
}
初始化朗读控件。
// 用于显示当前页的按钮状态
@State isInit: boolean = false;

// 初始化朗读控件
const readerParam: TextReader.ReaderParam = {
  isVoiceBrandVisible: true,
  businessBrandInfo: {
    panelName: '小艺朗读'
  }
}
try{
  await TextReader.init(getContext(this), readerParam);
  // 是否初始化，用于显示听筒按钮的状态
  this.isInit = true;
} catch (err) {
  console.error(`TextReader failed to init. Code: ${err.code}, message: ${err.message}`);
}
（可选）设置监听，在用户与控件进行交互时触发回调通知开发者。注销监听，监听结束后进行释放。
// 设置监听
setActionListener() {
  TextReader.on('setArticle', async (id: string) => { console.info(`setArticle ${id}`) });
  TextReader.on('clickArticle', (id: string) => {console.info(`onClickArticle ${id}`) });
  TextReader.on('clickAuthor', (id: string) => { console.info(`onClickAuthor ${id}`) });
  TextReader.on('clickNotification',  (id: string) => { console.info(`onClickNotification ${id}`) });
  TextReader.on('showPanel', () => { console.info(`onShowPanel`) });
  TextReader.on('hidePanel', () => { console.info(`onHidePanel`) });
  TextReader.on('stateChange', (state: TextReader.ReadState) => {
    this.onStateChanged(state)
  });
  // 在列表页无更多内容时，会显示加载失败，需要设置requestMore监听，调用loadMore函数以获得正确的显示信息。
  TextReader.on('requestMore', () => {
    TextReader.loadMore(this.newData, true)
  });
}
// 注销监听
releaseActionListener() {
  TextReader.off('setArticle');
  TextReader.off('clickArticle');
  TextReader.off('clickAuthor');
  TextReader.off('clickNotification');
  TextReader.off('showPanel');
  TextReader.off('hidePanel');
  TextReader.off('stateChange');
  TextReader.off('requestMore');
}
初始化完成，加载文章列表，启动朗读控件。
// 加载文章列表，启动朗读控件
const readInfoList: TextReader.ReadInfo[] = [{
  id: '001',
  title: {
    text:'水调歌头.明月几时有',
    isClickable:true
  },
  author:{
    text:'宋.苏轼',
    isClickable:true
  },
  date: {
    text:'2024/01/01',
    isClickable:false
  },
  bodyInfo: '明月几时有？把酒问青天。'
}];
TextReader.start(readInfoList).then(() => {
  console.info(`TextReader succeeded in starting.`);
}).catch((err: BusinessError) => {
  console.error(`TextReader failed to start. Code: ${err.code}, message: ${err.message}`);
})
（可选）若要配置长时任务，需要在module.json5配置文件中添加ohos.permission.KEEP_BACKGROUND_RUNNING权限，并且加入backgroundModes选项，确保朗读控件后台播报正常。
{
  "module": {
    // ...
    "requestPermissions": [
      {
        "name": "ohos.permission.KEEP_BACKGROUND_RUNNING",
        "usedScene": {
          "abilities": [
            "FormAbility"
          ],
          "when": "inuse"
        }
      }
    ],
    "abilities": [
      {
        // ...
        "backgroundModes": [
          "audioPlayback"
        ],
        // ...
      }
    ]
  }
}
开发实例
EntryAbility.ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { WindowManager } from '@kit.SpeechKit';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    console.info('Ability onCreate');
  }

  onDestroy(): void {
    console.info('Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    console.info('Ability onWindowStageCreate');
    WindowManager.setWindowStage(windowStage);

    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        console.error(`Failed to load the content. Code: ${err.code}, message: ${err.message}`);
        return;
      }
      console.info(`Succeeded in loading the content. Data: ${JSON.stringify(data)}.` );
    });
  }

  onWindowStageDestroy(): void {
    console.info('Ability onWindowStageDestroy');
  }

  onForeground(): void {
    console.info('Ability onForeground');
  }

  onBackground(): void {
    console.info('Ability onBackground');
  }
}
Index.ets

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

@Entry
@Component
struct Index {

  /**
   * 待加载的文章
   */
  @State readInfoList: TextReader.ReadInfo[] = [];
  @State selectedReadInfo: TextReader.ReadInfo = this.readInfoList[0];

  /**
   * 播放状态
   */
  @State readState: ReadStateCode = ReadStateCode.WAITING;

  /**
   * 用于显示当前页的按钮状态
   */
  @State isInit: boolean = false;

  async aboutToAppear(){
    /**
     * 加载数据
     */
    let readInfoList: TextReader.ReadInfo[] = [{
      id: '001',
      title: {
        text:'水调歌头.明月几时有',
        isClickable:true
      },
      author:{
        text:'宋.苏轼',
        isClickable:true
      },
      date: {
        text:'2024/01/01',
        isClickable:false
      },
      bodyInfo: '明月几时有？把酒问青天。'
    }];
    this.readInfoList = readInfoList;
    this.selectedReadInfo = this.readInfoList[0];
    this.init();
  }

  /**
   * 初始化
   */
  async init() {
    const readerParam: TextReader.ReaderParam = {
      isVoiceBrandVisible: true,
      businessBrandInfo: {
        panelName: '小艺朗读',
        panelIcon: $r('app.media.startIcon')
      }
    }
    try{
      await TextReader.init(getContext(this), readerParam);
      this.isInit = true;
    } catch (err) {
      console.error(`TextReader failed to init. Code: ${err.code}, message: ${err.message}`);
    }
  }

  // 设置操作监听
  setActionListener() {
    TextReader.on('stateChange', (state: TextReader.ReadState) => {
      this.onStateChanged(state)
    });
    TextReader.on('requestMore', () => this.onStateChanged);
  }

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