始终为Vaadin Web应用程序播放的语音命令-DEV365 开发者社区

这个小教程从开始到工作演示需要15分钟。我们使用Picovoice Porcupine Wake Word Engine启用Vaadin-based Java Web应用程序。

（如果您没有那么多时间：克隆repo，创建一个accesskey和run it。）

Wake Word检测也称为关键字发现，热词检测，始终播放的语音命令，触发单词检测和语音激活。

设置项目

第一步是创建一个新的Vaadin Java应用程序：

1.从start.vaadin.com with an empty view下载一个新项目。

2.创建新的Java API，以始终在关键字检测和导入PICOVOICE库：

package com.example.application;

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;

@NpmPackage(value = "@picovoice/porcupine-web", version = "2.1.16")
@NpmPackage(value = "@picovoice/web-voice-processor", version = "4.0.5")
@JsModule("./porcupine-integration.js")
public class Porcupine { 

    boolean started = false;

    public Porcupine(String picovoiceAccesskey) {
        UI.getCurrent().getPage().executeJs("window.vaadinPorcupine.key=$0;"
                    , picovoiceAccesskey);
    }

    public void start() {
        this.started = true;
        UI.getCurrent().getPage().executeJs("window.vaadinPorcupine.start()");
    }

    public void stop() {
        this.started = false;
        UI.getCurrent().getPage().executeJs("window.vaadinPorcupine.stop()");
    }

    public boolean isStarted() {
        return this.started;
    }
}

这是可用于vaadin Java应用程序的服务器API。

3.在Project的前端文件夹中创建Porcupine-Integration.js。

import { WebVoiceProcessor } from "@picovoice/web-voice-processor";
import { PorcupineWorker, BuiltInKeyword } from "@picovoice/porcupine-web";
import modelParams from "./porcupine_params.js";

// a global 'vaadinPorcupine' integration instance is enough
window.vaadinPorcupine = window.vaadinPorcupine || {
    key: null,
    async start() {
        console.log('Starting wake word detection');
        window.vaadinPorcupine._worker = window.vaadinPorcupine._worker ||         
        await PorcupineWorker.create(
            window.vaadinPorcupine.key,
            [BuiltInKeyword.Computer],
            window.vaadinPorcupine.keywordDetectionCallback,
            {base64: modelParams }
        );
        await WebVoiceProcessor.subscribe(window.vaadinPorcupine._worker);
    },
    async stop() {
        console.log('Stopping wake word detection');
        await WebVoiceProcessor.unsubscribe(window.vaadinPorcupine._worker);
    },
    keywordDetectionCallback(detection) {
        console.log(`Detected keyword: ${detection.label}`);
        const e = new CustomEvent("voice-wakeword", 
                    { "detail": detection.label });
        document.body.dispatchEvent(e);
    }
}

这是API的客户端部分集成了浏览器唤醒单词检测库。

4.下载豪猪模型（即深神经网络）。从项目前端文件夹中，运行以下内容以将二进制.PV模型转换为base64字符串模型。

echo "const model_params='$( cat porcupine_params.pv | base64 )';\nexport default model_params;\n\n" > porcupine_params.js

5.获取您的picovoice AccessKey

前往Picovoice Console's dashboard。复制您的AccessKey。

6.将测试按钮添加到emptyview.java，以打开和关闭唤醒单词检测：

final Porcupine porcupine = new Porcupine(System.getenv("PICOVOICE_ACCESSKEY"));
add(new Button("Start/Stop wake word detection", e -> { 
    if (!porcupine.isStarted()) {porcupine.start(); }
    else { porcupine.stop();}
}));

使用您自己的AccessKey运行应用程序：

PICOVOICE_ACCESSKEY=your_accesskey_here ./mvnw

源代码和更多示例？

我的GitHub repository提供了带有豪猪的完整vaadin演示的源代码。我在那里添加了一个自定义事件和处理程序示例，后来我会显示如何使用Picovoice Porcupine训练和添加您自己的自定义唤醒单词■我下一步该怎么办？