September 2, 2015 10:19 am

Useful HTML5 Features, Part 6

In this article, we will be presenting a very simple audio game and in the meantime teach you about the newly implemented text-to-speech browser capabilities. The game or novel is just a series of audio messages, followed by a question to the user. Each user response plays him a different audio message but there is only one correct response that will move him to the next level. If he gets the question wrong, he will return to the first level (question).Useful HTML5 Features

TTS browser-support

The Speech Synthesis API has 53.95% support globally according to Can I use.

It is supported in:
1. Chrome 36+,
2. Safari 7+,
3. Opera 30+,
4. Chrome for Android 42+,
5. iOS Safari 7.1+

Currently, Firefox and IE do not provide any support for the TTS or Speech Synthesis API.

TTS in practice

UI

Our UI would consist only of radio inputs which will be used to get the user response to the question. We give them the following styles:

In our markup, we only add one div in the body tag:

The TTS audio game

We declare three global variables (the names are pretty self-explaining)

Then, we check if the browser supports the TTS API and if it does – we initialize and declare the functions that the simple game will be using:

We add a function that will add all replies for a particular question to our global variable:

Then, we declare a function that will return all replies for a particular question:

Now, we actually define the function that works with the TTS API:

You can see that first you have to create an instance of SpeechSynthesisUtterance and pass it the message you want converted to speech as an argument. We then define the rate or pace at which the message will be spoken (how fast or slow) which varies from 0.1 to 10. Then, we execute callback which is a function that will get called when the message has been pronounced (msg.onend) and which adds the options that the users would be able to select from, the event handlers for their replies and the particular audio that will be displayed to the users as a reply to their selection.

Our addOptions function adds all radio inputs for the question to the DOM and adds event handlers that will be executed when the user clicks on an input:

If the user has guessed the right answer, we increment the global variable currentQuestion and ask a new question. Otherwise, we start from scratch.

Our final function askQuestion just contains all questions, options and replies that the game has and displays the question corresponding to the current value of the currentQuestion variable:

Conclusion

The Speech Synthesis API will have many uses in the web. From audio games to an email client that will read your emails out loud – everything is possible.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories: