Vaadin应用程序中的Beep

Question

我希望在我的VaadinFramework8应用程序中偶尔会有一个简短的蜂鸣声来吸引用户的注意。

示例用法:当输入到用户身份验证页面的密码无法成功验证时，发出哔哔声。用户点击“登录”按钮，在密码检查失败后立即发出哔声。

另一个例子:当自动更新 图表显著上升时，播放3声上升频率(音符)。如果图表呈下降趋势，播放下降频率(音符)。

我想避免下载一个健全的文件到网络客户端，除非这有明显的优势。使用JavaScript或HTML5在本地生成客户端的beep似乎更简单、更轻量级，并有望具有更高的性能。

我在这个JavaScript中找到了一个看起来像现代胡舍特的答复解决方案的东西。这个兄弟姐妹的回答( CaptainWiz )包含一个看起来很好的现场演示。

• 有没有办法从我的服务器端Vaadin应用程序的Java代码中触发客户端执行这个JavaScript代码？
• 会不会是演戏？我的意思是，在用户当前操作的上下文中，beep需要非常快地发生，而不是烦人/令人困惑的时间延迟。

或者，这个答案谈到HTML5有一个新的音频对象功能来播放声音文件。这可能比调用一段JavaScript代码进行声音合成更有优势吗？

另一种选择是: WebAudio API由W3C编写，如这个答案所示。

Answer 1

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

来自callFunction的AbstractJavascriptComponent直接调用浏览器中的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的“类”( beep类的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: 我怎样才能发出Javascript的哔声？引用的答案中删除

现在，确保在UI中的主场景图中添加了一个Beeper实例，这样就可以从任何地方访问它。

在这里可以找到一个有用的示例：https://github.com/christoph-frick/vaadin-webaudio-beep