Directory

← Back

Voice Recognition

Enables voice recording using the Web Speech API, displaying transcribed text, and offering controls for starting/stopping, clearing speech, and aborting recording.

Author

Rating

Popularity

200+

The component allows users to record their voice using the Web Speech API and displays the transcribed speech as text. The component provides buttons for starting/stopping recording, clearing the speech, and aborting the recording.

Sample code

// Create a new VoiceRecognition instance
VoiceRecognition voiceRecognition = new VoiceRecognition();

// Create a new Div for displaying the speech recognition results
Div resultLayout = new Div();

// Add the VoiceRecognition component and a Label for the results to the layout
add(voiceRecognition, new Label("Result:"), resultLayout);

// Add a result listener to the VoiceRecognition component
voiceRecognition.addResultListener(listener -> {
// Update the resultLayout's text with the speech recognized by the component
resultLayout.setText(listener.getSpeech());
});

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Release Notes Version 1.0.2 In this release, we have introduced new features and enhancements to the VoiceRecognition component. The following changes have been made:

Added Documentation: Comprehensive documentation has been added to the VoiceRecognition Java class, making it easier for users to understand and use the component effectively. This includes descriptions for the class itself, its properties, methods, and events. The detailed documentation will guide users on how to interact with the component and its events.

Added the Ability to Use Internal Buttons: The VoiceRecognition component now supports the option to use or hide its internal buttons. By using the setUseInternalButtons method, developers can control the visibility of the internal buttons for starting, stopping, and aborting the speech recognition process. This feature provides more flexibility for users to customize the component's appearance and behavior according to their requirements.

These updates are aimed at improving the user expe

Released
2023-04-05
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 20+
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

nebula-button - Vaadin Add-on Directory

A standard or toggle button. nebula-button - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/arsnebula/nebula-button](https://github.com//arsnebula/nebula-button/blob/v2.0.2/README.md) on 2019-05-22 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-green.svg)](https://www.webcomponents.org/element/arsnebula/nebula-button) [![Polymer Version](https://img.shields.io/badge/polymer-v2-blue.svg)](https://www.polymer-project.org) [![Sauce Labs Build Status](https://img.shields.io/badge/saucelabs-passing-red.svg)](https://saucelabs.com/beta/builds/0cf16e39be9b47638e70e12749c9b574) [![Gitter Chat](https://badges.gitter.im/org.png)](https://gitter.im/arsnebula/webcomponents) [![Become a Patreon](https://img.shields.io/badge/patreon-support_us-orange.svg)](https://www.patreon.com/arsnebula) # \ A web component to display a ghost-style command or toggle button. * Elegant ghost-style flat button * Supports standard and toggle states * Customizable with standard CSS, variables and mixins. * Supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#button) authoring practices for **a11y** > This package is part of the [Nebula Essentials](https://www.webcomponents.org/collection/arsnebula/nebula-essentials) collection. ## Installation ```sh $ bower install -S arsnebula/nebula-button ``` ## Getting Started Import the element. ```html ``` Add the element. The default is a standard command button. ```html Button ``` Add define a toggle button, enabled the `toggle` property. ```html Button ``` Style the button with standard CSS. ```css nebula-button { color: teal; } ``` *For more information see the API Reference documentation.* ## Contributing We welcome and appreciate feedback from the community. Here are a few ways that you can show your appreciation for this package: * Give us a **Star on GitHub** from either [webcomponents.org](https://www.webcomponents.org/element/arsnebula/nebula-element-mixin) or directly on [GitHub](https://github.com/arsnebula/nebula-element-mixin). * Submit a feature request, or a defect report on the [Issues List](https://www.webcomponents.org/element/arsnebula/nebula-element-mixin/issues). * Become a [Patreon](https://www.patreon.com/arsnebula). It takes a lot of time and effort to develop, document, test and support the elements in our [Nebula Essentials](https://www.webcomponents.org/collection/arsnebula/nebula-essentials) collection. Your financial contribution will help ensure that our entire collection continues to grow and improve. If you are a developer, and are interested in making a code contribution, consider opening an issue first to describe the change, and discuss with the core repository maintainers. Once you are ready, prepare a pull request: 1. Fork it! 2. Create your feature branch: `git checkout -b my-new-feature` 3. Commit your changes: `git commit -am 'Add some feature'` 4. Push to the branch: `git push origin my-new-feature` 5. Submit a pull request :D ## Change Log See [CHANGELOG](/CHANGELOG.md) ## License See [LICENSE](/LICENSE.md)
View on GitHub
Online Demo
Documentation
GitHub Homepage
Issue tracker
License

nebula-button version 1.0.0
### Dependencies * polymer#Polymer/polymer#^1.7.1 * nebula-theme-behavior#arsnebula/nebula-theme-behavior#^1.0.0 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^1.0.1

nebula-button version 1.0.1
### Dependencies * polymer#Polymer/polymer#^1.7.1 * nebula-theme-behavior#arsnebula/nebula-theme-behavior#^1.0.0 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^1.0.1

nebula-button version 1.0.2
### Dependencies * polymer#Polymer/polymer#^1.7.1 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^1.0.2 * nebula-style-attributes-behavior#arsnebula/nebula-style-attributes-behavior#^1.0.0

nebula-button version 1.1.0
### Dependencies * polymer#Polymer/polymer#^1.7.1 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^1.1.2 * nebula-style-attributes-behavior#arsnebula/nebula-style-attributes-behavior#^1.1.0

nebula-button version 1.1.1
### Dependencies * polymer#Polymer/polymer#^1.7.1 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^1.1.2 * nebula-style-attributes-behavior#arsnebula/nebula-style-attributes-behavior#^1.1.1 * nebula-button-behavior#arsnebula/nebula-button-behavior#^1.0.0

nebula-button version 1.1.2
### Dependencies * polymer#Polymer/polymer#~1.7.1 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#~1.1.3 * nebula-style-attributes-behavior#arsnebula/nebula-style-attributes-behavior#~1.1.1 * nebula-button-behavior#arsnebula/nebula-button-behavior#~1.1.0

nebula-button version 1.1.3
### Dependencies * polymer#Polymer/polymer#~1.7.1 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#~1.1.5 * nebula-style-attributes-behavior#arsnebula/nebula-style-attributes-behavior#~1.1.1 * nebula-button-behavior#arsnebula/nebula-button-behavior#~1.1.2

nebula-button version 1.1.4
### Dependencies * polymer#Polymer/polymer#^1.7.1 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#~1.1.5 * nebula-style-attributes-behavior#arsnebula/nebula-style-attributes-behavior#~1.1.1 * nebula-button-behavior#arsnebula/nebula-button-behavior#~1.1.2

nebula-button version 1.2.0
### Dependencies * polymer#Polymer/polymer#^1.7.1 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^1.1.5 * nebula-style-attributes-behavior#arsnebula/nebula-style-attributes-behavior#^1.1.1 * nebula-button-behavior#arsnebula/nebula-button-behavior#^1.1.2

nebula-button version 1.3.0
### Dependencies * polymer#Polymer/polymer#^1.7.1 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^1.2.0 * nebula-button-behavior#arsnebula/nebula-button-behavior#^1.1.3

nebula-button version 2.0.0
### Dependencies * polymer#Polymer/polymer#>=2.0.0-rc.1 <3.0 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^2.0.0 * nebula-button-behavior#arsnebula/nebula-button-behavior#^2.0.0

nebula-button version 2.0.1
### Dependencies * polymer#Polymer/polymer#>=2.0.0-rc.1 <3.0 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^2.0.0 * nebula-button-behavior#arsnebula/nebula-button-behavior#^2.0.0

nebula-button version 2.0.2
### Dependencies * polymer#Polymer/polymer#^2.0.0 * nebula-focus-behavior#arsnebula/nebula-focus-behavior#^2.0.0 * nebula-button-behavior#arsnebula/nebula-button-behavior#^2.0.0

Online