javascript - Vaadin 应用程序中发出蜂鸣声

Question

我希望在我的 Vaadin Framework 8 应用程序中偶尔发出短促的蜂鸣声来引起用户的注意。

使用示例:在用户验证页面输入密码未能成功验证时发出蜂鸣声。用户点击“登录”按钮，密码检查失败后立即发出蜂鸣声。

另一个例子:当 automatically updated chart趋势显着上升，以上升频率播放 3 声蜂鸣声(注释)。如果图表趋势向下，则播放降序频率(注释)。

我想避免将声音文件下载到网络客户端，除非这样做具有明显的优势。使用 JavaScript 或 HTML5 在客户端本地生成蜂鸣声似乎更简单、轻量级，并且有望获得更高的性能。

我在这个Answer by Houshalter中找到了看起来像现代JavaScript解决方案的东西。 。还有这个sibling Answer by CaptainWiz包含一个似乎运行良好的现场演示。

• 有没有办法从我的服务器端 Vaadin 应用程序的 Java 代码触发客户端执行此 JavaScript 代码？
• 它会表现出色吗？我的意思是，蜂鸣声需要在用户当前操作的上下文中非常快地发生，而没有烦人/令人困惑的时间延迟。

或者，this Answer谈论 HTML5 具有用于播放声音文件的新音频对象功能。与调用大量 JavaScript 代码进行声音合成相比，这可能有优势吗？

另一种替代方案:W3C 的WebAudio API，如 this Answer 所示.

Answer 1

通过 AbstractJavascriptComponent 实现此目的的一种方法在瓦丁。这提供了一种相当直接的方法来编写 Javascript 组件或创建 JS 库无需花费太多时间来掌握 GWT 等即可轻松访问。

来自 AbstractJavascriptComponent 的 callFunction 直接调用浏览器中的 JS 代码。

创建一个 Beeper 类:

package app.ui
import com.vaadin.annotations.JavaScript
import com.vaadin.ui.AbstractJavaScriptComponent
@JavaScript("js/beeper_connector.js")
class Beeper extends AbstractJavaScriptComponent {
    void beep(Integer duration, Integer frequency) {
        callFunction('beep', duration, frequency)
    }
}

注意注释并在同一包中创建该文件 (app.ui)，在具有该名称的路径上 (js/beeper_connector.js)。该文件需要位于至少包含一个名为 app_ui_Beeper 的“类”(Java 类的 FQN)将点替换为下划线)添加您的 beep 函数，其参数为类型，可以通过“JSON”传输:

window.app_ui_Beeper = function() {
    var audioCtx = new (window.AudioContext || window.webkitAudioContext || window.audioContext);
    this.beep = function(duration, frequency) {
        var oscillator = audioCtx.createOscillator();
        var gainNode = audioCtx.createGain();
        oscillator.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        if (frequency){oscillator.frequency.value = frequency;}
        oscillator.start();
        setTimeout(function(){oscillator.stop()}, (duration ? duration : 500));
    };
};

此代码摘自OP引用的答案:How do I make Javascript beep?

现在请确保您在主场景中的某处添加了一个 Beeper 实例用户界面中的图表，因此可以从任何地方访问它。

可以在这里找到一个工作示例:https://github.com/christoph-frick/vaadin-webaudio-beep