Converting text to speech using HTML5 audio

If we were to build a web-based navigation applications today, most of the components would already be available. There are Google maps or open street map components to display maps, as well as API services that provide driving directions.

But what about voice-based navigation guidance? Wouldn't that require another API service that converts text to speech?

Thanks to HTML5 audio and Emscripten (a C to JavaScript compiler), we can now use a free text-to-speech engine called espeak that works fully in the browser.

In this example we're going to use espeak to generate text entered by the user on a simple page. Most of the work will consist of preparations—we will need to set up espeak.js.

Getting ready

We need to download the speak.js from (http://github.com/html5-ds-book/speak-js). Click on the download zip button and download the archive to a newly created folder. Extract the archive in that folder—it should create a sub folder called speak-js-master...