返回博客首页
← 所有文章

当应用程序“说”回来:文本转语音插件

2017 年 6 月 1 日 — 作者:Jen Looper

众所周知,任何移动应用程序开发人员在开始一个移动应用程序项目时,项目成果通常取决于您需要集成的插件的牢固性。我个人从未做过没有至少五个插件来添加自定义的、移动友好的特性的应用程序。有些插件提供复杂的功能层 - 例如,Firebase 插件与 Firebase 本身一样复杂,允许开发人员选择要集成的插件部分:Admob、文件存储、推送通知、远程配置等等。但有些插件开箱即用,非常完美,配置和使用起来非常轻松。文本转语音插件最初由 Matthew Knight 创建,后来由开发人员专家 Brad Martin 接管并增强,就是一个这样的插件。

为什么我的应用程序需要使用文本转语音插件?一个很好的用例是,如果您针对的是老年人,他们难以在移动设备上阅读文本 - 只需按下一个按钮,语音就会将文本朗读出来。另一个用例是,如果您正在创建电子书 - 我曾经有人要求在我的 Snappy Squirrel 电子书系列中添加朗读功能。另一个是当前的用例:一个 食谱应用程序,用于您不想在烹饪时同时用巧克力手指滚动查看食谱时。相反,只需点击一下按钮,就会朗读出食材、方法和工具列表。

集成插件很简单。插件页面提供了一个示例和原生 NativeScript 中的演示,但我已经在 Angular 和 NativeScript 中也完成了它: 

在您的应用程序中安装插件

tns plugin add nativescript-texttospeech

然后,在您需要的地方导入插件引用。我在我的食谱详细信息组件中使用它

...
//import the plugin
import { TNSTextToSpeech, SpeakOptions } from 'nativescript-texttospeech';
...
@Component({
    ...
})
export class RecipeDetailComponent implements OnInit {
    ...
    //set a default boolean for a button to animate when the tts plugin 'speaks'
    isSpeaking: boolean = false;
    ...
    private TTS: TNSTextToSpeech;
    constructor(
        ...
    ) {
        ...
        this.TTS = new TNSTextToSpeech();
    }
    ...
    //on button press, the text visible on the screen is spoken aloud
    speak(text: string){
        this.isSpeaking = true;
        let speakOptions: SpeakOptions = {
            text: text,
            speakRate: 0.5,
            //language: "fr",
            finishedCallback: (() => {
                this.isSpeaking = false;
            })  
        }
        this.TTS.speak(speakOptions);
    }
}

安装并集成插件后,有趣的调整就可以开始了。提供了各种 SpeakOptions,以便您可以自定义播放。根据您的喜好调整语音速率、音量和音调,请注意,模拟器和平台的结果会有所不同。我发现将 speakRate 设置为推荐的“1.0”会导致我的食谱变成“松鼠”版本,但我可以想象,对于某些用户来说,增加音量滑块将非常有用。


text: string ** required **
queue?: boolean = false
pitch?: number = 1.0
speakRate?: number = 1.0
volume?: number = 1.0
language?: string = default system language
finishedCallback?: Function

特别有趣的是能够设置语言。例如,如果您的目标受众是法国人,您可能希望将语言设置为其相应的 ISO 639-1 语言代码(例如,法语为“fr”)。我发现,将英语文本输入 TTS 插件并将语言代码设置为法语会产生奇怪的有趣结果,就像一个不知道变调的人试图朗读《世界报》一样。 

相反,如果我将模拟器的基本语言切换到法语,然后将用英语编写的文本输入插件,听起来就像一个不幸的法语使用者在努力说英语单词。当然,最好的结果是在将手机的默认语言切换到目标语言之后,然后将本地化的字符串输入插件。因此,我的应用程序在使用法语文本朗读法语时,听起来很奇妙,就好像保罗·博古斯发现如何制作披萨面包圈并通过我的模拟器向我解释了一切。太棒了!

Simulator Screen Shot May 27, 2017, 1.30.42 PM

在模拟器的设置窗格中切换设备的基本语言

正如插件文档所述,请谨慎使用此语言切换功能 - 但如果您知道您的用户群的手机都将切换到特定的语言,那么请务必使用它!将文本转语音插件与检测用户手机语言选择的 i18n 插件结合使用将非常棒:https://github.com/rborn/nativescript-i18n.

这是 QuickNoms 食谱工具列表使用此插件朗读的最终结果




本文是社区构建的有趣 NativeScript 插件系列的第一篇。您使用什么插件?您最喜欢哪些?请在评论中告诉我们。