Happy Path: Adding speech recognition to Vaadin apps.
Tags: java, vaadin, webdev, speechrecognition
Published: 2023-04-18 14:15:32

---
title: Happy Path: Adding speech recognition to Vaadin apps.
published: true
description: Learn how to implement web speech recognition actions in Java using Vaadin. 
tags: java, vaadin, webdev, speechrecognition
series: Web Applications with Voice Control
canonical_url: https://vaadin.com/blog/adding-speech-recognition-to-vaadin-apps
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-18 16:53 +0000
---

The previous blog post added [wake word detection](https://dev.to/samiekblad/always-listening-voice-commands-for-vaadin-web-applications-3bhp) for a Vaadin application using Picovoice. That is a robust in-browser approach to creating always-listening apps. You might want to use that for full speech recognition, but also the draft standard [web speech API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) also provides a way to voice-enable applications. 

There are a few ways you can [integrate web APIs](https://dev.to/samiekblad/whats-the-deal-with-vaadin-add-ons-2f1n). This time we look at how to use web speech API for speech recognition in [Vaadin](https://vaadin.com/flow) by integrating a ready-made add-on from Vaadin Directory.

## Choose an add-on from Vaadin Directory
Head to [vaadin.com/directory](https://vaadin.com/directory/?q=speech) and search for _"speech"_. Pick an add-on, such as "Voice Recognition", and click the install button on the top-right to see the different ways of installing: get the necessary dependencies, download, or in this case: create a new project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w3k45holgwstzh2jdb3.png)

## Create a Vaadin project with the add-on
Click on "Create Project" and it starts downloading a Zip file with the full Maven project setup. Extract the zip and import it into your IDE. In IntelliJ, use `New` --> `Project from Existing Sources...`. 

## Implement Speech Recognition in Vaadin UI
After opening the Vaadin project in your IDE, locate the main View class. I edited the "HelloWorldView.java" which has some sample code in it. Head back to [the add-on page](https://vaadin.com/directory/component/voice-recognition) and copy and paste the sample code from the add-on's documentation into the constructor of the view class. Just replace the previous sample code. 

Run the Application class in debug and start the development server. Because we are adding a new add-on, this might take a while, but be patient. 

Click the start button in the UI and grant permission to use the microphone. Try to say something and see how well it performs. On the first try, the browser will ask your permission to access the mic. Remember, at the time being, the speech recognition API is only available in [Chrome and Safari](https://caniuse.com/speech-recognition). 

## Customize and add your own commands
Now you can implement your custom application-specific functions. For example, modifying the code in the event listener to show a Vaadin standard [Notification](https://vaadin.com/docs/latest/components/notification):

```java
final String command = "show notification";
voiceRecognition.addResultListener(listener -> {
    String text = listener.getSpeech();
    if (text.contains(command)) {
        Notification.show(
            text.substring(text.indexOf(command)
                          +command.length()));
     }
});
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do0mlk0atnel395jyff6.png)

## Conclusion
That was a simple way to create a voice commands for Vaadin web application. While still limited by browser support, speech recognition opens up exciting possibilities for enhancing user experience in web applications. Share your thoughts and experiences in the comments below, and stay tuned for more.