从零开始开发纯血鸿蒙应用之语音朗读

从零开始开发纯血鸿蒙应用

〇、前言
一、API 选型
- 1、基本情况
- 2、认识TextToSpeechEngine
二、功能集成实践
- 1、改造右上角菜单
- 2、实现语音播报功能
- - 2.1、语音引擎的获取和关闭
  - 2.2、设置待播报文本
  - 2.3、speak 目标文本
  - 2.4、设置语音回调
三、总结

〇、前言

中华汉字洋洋洒洒何其多，难免会遇到不知怎么读的字，这时候，如果应用本身就能够进行文本朗读，那么就可以快速知道对应的发音，而不用跑到浏览器上搜索相关资料。

再者，众多用户之中，难免有喜欢听书而不喜欢读书，或者限于自身经历而不识字的，总而言之，作为文本文件浏览和编辑的软件，TxtEdit 有必要提供语音朗读的功能，这一点，在鸿蒙NEXT API 的自身 AI 功能助力下，实现起来并不是很困难，下面就为大家介绍，如何在自己的纯血鸿蒙应用中，集成语音朗读文本的功能。

一、API 选型

1、基本情况

在这里插入图片描述
我相信，任何一个有认真阅读华为开发者平台上的鸿蒙API参考文档的人，都应该知道鸿蒙 NEXT API 里面有专门提供 AI 能力的，而其中，就有一个Core Speech Kit（基础语音服务） 模块，而这就是实现我们的目标所需的；毕竟只是简单的文本转语音，所以，无需太高级的AI能力的，基础的就已经足够了。

2、认识TextToSpeechEngine

Core Speech Kit ，有两大能力，一是文本转语音，二是语音转文本即语音识别。文本转语音 API，名为 textToSpeech，它包含了 TextToSpeechEngine 在内的众多与文本转语音相关的方法或功能类。

TextToSpeechEngine，顾名思义，是一个语音引擎，获取引擎实例需要用对应的构建方法，而不是直接 new 出来。有了引擎实例之后，就可以用它将目标文本转换成语音信息，并播放出来，也就是 speak 出来。
在这里插入图片描述
当我们不在需要语音引擎了，出于节约资源的考量，我们应该及时 shutdown，这个关闭动作，可以放在生命周期函数，如 aboutToDisappear 里面。

speak 的方法原型如下：
在这里插入图片描述
如图所示，speak 一共有两个参数，第一个参数就是待进行语音播报的文本内容，第二个则是进行语音播报所必须设置的参数，该参数一共包含两个设置项：
1）请求 ID，要求每次都不同，最好全局唯一
2）语音参数，主要包括语速、音量、音调、合成类型等，使用 Record<string, Object> 结构封装：

<‘speed’, number> 语速。可选，支持范围[0.5-2]，不传参时默认为1，使用一倍语速合成音频流。
<‘volume’, number> 音量。可选，支持范围[0-2]，不传参时默认为1，使用一倍音量合成音频流。
<‘pitch’, number> 音调。可选，支持范围[0.5-2]，不传参时默认为1，使用正常音调合成音频流。
<‘languageContext’, string> 语境，播放阿拉伯数字用的语种。可选，当前仅支持“zh-CN”中文，不传参时默认“zh-CN”。设置为zh-CN时，也可对英语进行语音播报
<‘audioType’, string> 音频类型。可选，当前仅支持“pcm”，不传参时默认为“pcm”（PCM 即脉冲编码调制 (Pulse Code Modulation)）。
<‘playType’, number> 合成类型。可选，不传参时默认为1。0，仅合成不播报，返回音频流。1，合成与播报不返回音频流。
<‘soundChannel’, number> 播报通道。可选，参数范围请参考音频流使用来选择适合自己的音频场景，范围之外会播报异常。不传参时默认为3，语音助手通道。
<‘queueMode’, number> 播报模式。可选，不传参时默认为0。0：排队模式播报。1：抢占模式播报。

通常，只需要对语速、音量、音调、语境和音频类型进行设置即可。

二、功能集成实践

下面，开始将 TextToSpeechEngine 集成到 TxtEdit 中，

1、改造右上角菜单

我将语音播报功能的触发入口，放在之前的右上角菜单中：
在这里插入图片描述
相对应的，PageTitleBar 里新增一个字段作为功能载入通道：

2、实现语音播报功能

在使用 PageTitleBar 的 ViewFilePage 中，编写实现语言播报功能的相关代码，并载入到 PageTitleBar 中。

2.1、语音引擎的获取和关闭

首先，在 ViewFilePage 中声明一个字段用于持有语音引擎实例，不放就将该字段取名为 textSpeechEngine，为了关闭语音引擎后进行内存释放，该字段的类型需要声明为 textToSpeech.TextToSpeechEngine|null。

语音引擎的关闭动作，由 aboutToDisappear 完成：
在这里插入图片描述
那么，语音引擎的实例创建，就自然地由 aboutToAppear 来完成：

语音引擎实例的创建，同样需要初始化参数：

2.2、设置待播报文本

在使用语音引擎进行文本播报之前，需要将目标文本进行确定，我采用的处理逻辑如下：
1）当用户有进行文本选择时，只播报选择的那些文本；
2）当用户没有进行文本选择时，播报整个文件内容；
3）如果文件内容为空，则固定播报“没有可以播报的内容”。

针对第一种情况，需要利用 Text 组件的 onTextSelectionChange 事件处理函数：

onTextSelectionChange((start, end) => {this.copyStart = start;this.copyEnd = end;if (this.fileContent) {this.selectedText = this.fileContent.slice(this.copyStart, this.copyEnd);}
})

2.3、speak 目标文本

最后，在 PageTitleBar 的使用处，新增如下的一段代码：
在这里插入图片描述
为了保证请求ID的唯一性，我使用了 NANOID 方法，对应的实现代码如下：

function nanoid(size = 21) {let id = '';const urlAlphabet = 'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW';const mask = urlAlphabet.length - 1;const step = Math.log(urlAlphabet.length) / Math.log(256);const random = () => Math.random() * 256;while (size--) {id += urlAlphabet[Math.floor(random() * step) & mask];}return id;
}export default nanoid;

这个 NANOID 的实现代码，我是放在了 lib_util 模块中，所以，想要其他模块中也可以使用，还必须在 lib_util 模块的 index.ets 文件中，更新一句代码：export { default as NANOID } from "./src/main/ets/NANOID"。