// 导入语音朗读相关的组件和类型import { TextReader, TextReaderIcon, ReadStateCode } from '@kit.SpeechKit';
@Entry@Componentstruct 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; // 标记初始化完成 this.setActionListener(); // 设置事件监听 } } 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', () => { TextReader.loadMore([], true); }) }
// 处理朗读状态变化 onStateChanged = (state: TextReader.ReadState) => { // 只处理当前选中文章的状态变化 if (this.selectedReadInfo?.id === state.id) { this.readState = state.state; } else { this.readState = ReadStateCode.WAITING; } }
// 构建UI界面 build() { Column() { // 朗读状态图标 TextReaderIcon({ readState: this.readState }) .margin({ right: 20 }) .width(32) .height(32) .onClick(async () => { // 点击图标时开始朗读 try { await TextReader.start(this.readInfoList, this.selectedReadInfo?.id); } catch (err) { // 朗读失败时打印错误信息 console.error(`TextReader failed to start. Code: ${err.code}, message: ${err.message}`); } }) } .height('100%') }}
评论