如何解决朗读控件播放列表中加载失败的问题
====================

#### 问题现象

参考[官网](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/speech-textreader-guide#section22701210512)示例，实际运行时，点击朗读控件的播放列表时，会展示“加载失败”字样，如何解决该问题？

问题效果预览：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fd/v3/NZKIF495SxmUKYSEq6lEYw/zh-cn_image_0000002658794093.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134436Z&HW-CC-Expire=86400&HW-CC-Sign=BAFFAC3B95E6A982AB082A27BF6EB123EA22240DBF31C47C98C5774B64207777 "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9/v3/s_1r6CdeQbKeza-Y-AVd3A/zh-cn_image_0000002628394830.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134436Z&HW-CC-Expire=86400&HW-CC-Sign=B3EB201B6E6C2388916B10F59206C1FC7FBCA9A7C5B152495512A3C2492FAFC4 "点击放大")

#### 背景知识

*   [朗读控件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/speech-textreader-guide)应用广泛，例如在用户不方便或者无法查看屏幕文字的时候，为用户朗读新闻，提供资讯。
*   该控件提供[on(type: 'requestMore')](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/speech-textreader-api#section14269319175019)请求更多文章回调函数，拉到播放列表底端或播放到文章最后一篇，触发该回调执行。

#### 解决方案

案例中展示“加载失败”是由于未自定义设置请求更多文章回调函数导致的，需要补充请求更多文章回调函数，并添加空列表项即可。

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 {
      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}\`);
    }
  }

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

   _ // 添加请求更多文章回调函数，并在回调函数中新增空列表项_
    TextReader.on('requestMore', () \=\> {
      console.info(\`requestMore\`);
      try {
        console.info(\`loadMore\`);
        TextReader.loadMore(\[\], true);
      } catch (e) {
        console.error(\`TextReader failed to loadMore. Code: ${e.code}, message: ${e.message}\`);
      }
    });
  }

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