Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.
Siri, Cortana, Alexa, Google Assistant. They are all intelligent virtual assistants developed throughout the years, and can be extremely helpful if you know how to interact with them. One thing they have in common is that everything needs to be queried by speaking, which means the systems can understand our given speech and at the same time, be able to talk back. 
The same thing can already be achieved in Web by using one of the experimental technologies, Web Speech API. So today, we will introduce a web component, which has made use of that, namely voice-elements, developed by zenorocha.
Background
This component receives a whirlwind of attention with a massive number of stars and forks. It consists of 2 sub-elements, voice-player, and voice-recognition. You use voice-player to play the text while the latter handles the voice recognition.
Fluent in 8 languages
These elements are amazingly simple to use. With voice-player, you can control what it will say by giving a string to the attribute text. With the autoplay attribute, the speech will start once the component has done loading. One of the coolest features is that voice-elements can handle eight languages in total (English (US, GB), Spanish, French, Italian, German, Japanese, Korean and Chinese), including both spoken and recognized. For more info, you can check out this demo page, which was made by the author himself.
Let’s go and see them in action.
voice-player
In this clip, we will try some tongue twisters in different accents.
Results: The voice is really clear, and its quality is excellent. This element can entirely be used as a narrator for a website, a speaker in a game, or even as guidance for disabled people.
...
...
voice-recognition
Now, we are going to see how well it can detect people’s speech. I asked some of my colleagues to test this element and they were pretty excited about this.
Results: The results were indeed positive, even a bit unexpected since people did not think that it can recognize the voice that well. Despite being not so consistent with special characters, like dots and commas, the component was still doing a great job in detecting those symbols. One of our colleague, Sun Zhe, was surprised to discover that the element can recognize Cantonese as well.
...
...
Not compatible with IE
Being an experimental technology, the API does have its ups and downs. The good thing is that all modern browsers let the element speak to you, including Chrome, Firefox, Safari, Opera, and Edge. The downside is that only Chrome can understand what you say, and neither of the functions are available on IE.
From caniuse.com, it seems that the component can give a text-to-speech input on Chrome for Android. I additionally tested it for Chrome on iOS, and no output was shown.
| Component | Mobile |
Library |
Working |
| voice-player |
✘ |
Polymer^1.0.0 |
C,S,O,F,E |
| voice-recognition |
✘ |
Polymer^1.0.0 |
C |
*Note: All components have been tested on Chrome, Safari, Opera, Firefox, Edge and IE11 as well as on Chrome on iOS 11. I will use the initial letter of the browser to indicate that specific one (for example, C stands for Chrome)
Final thoughts
voice-elements is an example of the next generation of web components, it shows the power of combining a web component library and an experimental API. Through this, developers can create different tools, which can make our lives more hi-tech and digital. Maybe one day, each one of us can develop our own Siri-like functions in our web apps.
Click here for more awesome web components