在 Vaadin 应用程序中发出哔声

Posted 2023-02-25

【中文标题】在 Vaadin 应用程序中发出哔声

【英文标题】：Beep in Vaadin app

【发布时间】：2017-06-30 07:03:00

【问题描述】：

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

示例用法：当密码输入到用户认证页面未能成功认证时发出哔声。用户点击“登录”按钮，密码检查失败后立即发出哔哔声。

另一个例子：当automatically updatedchart 呈明显上升趋势时，以递增的频率（音符）播放 3 声哔声。如果图表呈下降趋势，则播放下降频率（注释）。

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

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

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

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

另一种选择：WebAudio 由 W3C 提供的 API，如 this Answer 所示。

【问题讨论】：

什么是（类）“当前操作的上下文”？当用户在数字字段中输入字母时，它应该发出哔哔声吗？或者如果有新消息到达，它应该发出哔哔声？

@cfrick 用法示例：当密码输入用户身份验证页面未能成功进行身份验证时发出哔声。用户点击“登录”按钮，密码检查失败后立即发出哔哔声。

【参考方案1】：

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

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

创建一个蜂鸣器类：

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 实例 图形在 UI 中，因此可以从任何地方访问。

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