Susper has been given a voice search feature through which it provides a user with a better experience of search. We introduced to enhance the speech-recognition user interface by adding transition effects. The transition effect was required to display appropriate messages according to voice being detected or not. The following messages were:
- When a user should start a voice search, it should display ‘Speak Now’ message for 1-2 seconds and then show up with message ‘Listening…’ to acknowledge user that now it is ready to recognize the voice which will be spoken.
- If a user should do not speak anything, it should display ‘Please check audio levels or your microphone working’ message in 3-4 seconds and should exit the voice search interface.
The idea of speech UI was taken from the market leader and it was implemented in a similar way. On the homepage, it looks like this:
On the results page, it looks like this:
For creating transitions like, ‘Listening…’ and ‘Please check audio levels and microphone’ messages, we used CSS, RxJS Observables and timer() function.
Let’s start with RxJS Observables and timer() function.
RxJS Observables and timer()
timer() is used to emit numbers in sequence in every specified duration or after a given duration. It acts as an observable. For example:
Text animation using CSS
The source code for the implementation can be found in this pull request: https://github.com/fossasia/susper.com/pull/663
- Keyframe animation syntax by Chris Coyier Las: https://css-tricks.com/snippets/css/keyframe-animation-syntax/
- Observable RxJS: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-timer