App Inventor sample project: Voice to Text and vice-versa

I'm back with another App Inventor tutorial for you. This time around, I have a simple tutorial that demonstrates an app that is able to convert your voice to text and, in turn, that text back to voice. Google does all of the heavy lifting in regards to converting voice and text, and thankfully makes it very easy to tap into those resources.

Let's get started...

1. Click on My Projects, then create a new project. I called mine VoiceApp.

2. You will now see the layout screen with Palette, Viewer, Components, Media and Properties boxes. Adding components is easy by dragging objects from the Palette box onto the Viewer.

3. Now drag a Button from the left column under Basic onto the palette. Select the button in the Components column and click Rename to change the name to VoiceToTextButton. Then, in the Properties column, set the Text to "Voice to Text."

4. Next, drag in a Label and place below the VoiceToTextButton. Rename the label to ResultLabel and set the Text field to "".

5. Drag in another Button and place below ResultLabel. Rename to TextToVoiceButton and set Text field to "Text to voice."

6. Now, expand the Other Stuff tab in the left column and drag two final components onto the palette: SpeechRecognizer and TextToSpeech. NOTE: These are non-visible components and so will appear below the palette.

Your screen should now look like this:


7. Now connect your Android phone via usb. On your phone, go to Settings-->Applications-->Development. Enable USB debugging and Stay awake.

8. On the layout screen click the button to Open the Blocks Editor. This will open a Java applet that contains all of the logic blocks/action handlers and interfaces with your phone.

9. In the Blocks Editor, create the following code:

We need to handle the Voice to text button click event first. In this, we simply tell the SpeechRecognizer1 to start listening. The BeforeGettingText function clears our label so the words spoken can be displayed there. The AfterGettingText function sets our label to the words spoken.

10. To go the other way--text to voice--we handle the click event of the other button. TextToSpeech1.Speak has an output parameter that we set to our label.text field.

In order for this component to work, the device must have the TTS Extended Service app by Eyes-Free Project installed. You can download this from http://code.google.com/p/eyes-free/downloads/list

So there's the code (layout and blocks) required for building a simple voice-to-text and text-to-voice application.

Download this application onto your phone by scanning this code: