Designing and Building JavaFX Text to Speech Tester

This is the last in the series about writing applications which convert text to speech. We started off the journey by introducing the final product, a Speech Tester JavaFX application.
It is this application that we are going to design and build here.

The application allows the user to select an available voice from those that the speech engine has access to. A collection of words, making up a phrase is provided to the application and the application will then convert this text to speech using the selected voice.

User Interface

The application allows for the selected voice sound to be modified by altering various parameters such as the pitch, rate and duration.  By altering these setting from the default values the sound can be modified to help find the ideal settings for your needs.

The application has a simple user interface made up of a drop-down list for the available voice selection.  There are a series of text fields for each of the configurable items for the voice followed by a text area where the user can type in the words to convert to speech.  Over on the right-hand side of the application is another text area with a grey background. This text area is used to display the actual voice settings applied in creating the sound.  The ‘Ok’ and ‘Cancel’ buttons play the sound and clear the user interface respectively.

Project setup and application design

Having taken a look at what our application needs to look like we can think about what we need to build our application and how we want to structure the code.

We will build the project using Eclipse IDE, although any IDE will do.  Gluon Scene will be used to build and layout the user interface.

We will make use of external libraries as covered in the items earlier in the series but for ease of reference I will list them here:

  • FreeTTS speech synthesiser
  • MBROLA binary and voices files

As for the structure of our code, this is intended to be a small and simple application and therefore we want to keep it easy.  We will have a class as the entry point for the application.  This will take care of launching our JavaFX application.

Because we are using Scene Builder, we will have an FXML file containing the XML description of each of the UI items.  In partnership with the FXML file, we will have a Java controller file for managing the UI components.

Sometimes when you come to design an application you lack experience in an area.  This lack of experience can make it very difficult to know how to build your code.  To overcome this limitation, you can build a quick and dirty application to learn how to achieve something.  This is exactly what we have done here in the preceding items on Test-to-Speech.  We used the earlier exercises to learn how to get the speech synthesiser to work within our project and how to add voices to the speech engine and then finally how to convert the text to sound.  With that knowledge, we are better able to understand how to proceed with our application.

We now know that we can get access to the voice manager and this will give us information about the voices available.  We also know we will need to get a list of voices that we can display in our drop-down list as well as being able to get a specific voice to use.  To help us manage these things we will create a helper class to handle all the voice manager interaction.

We also know we want to display information about the selected voice when used.  In order to do this, we will create another class that we can use to get the details of our voice.

That about sums up what we need so let’s take a look at this in more detail.

Creating the project

As I mentioned earlier, we will be using Eclipse in this example, but any IDE will work including handcrafting the project.

Start by creating a JavaFX project.  Next, create a new class which I will call ‘SpeechTester’ and place in a package ‘application’.

This class will have the main method entry point for Java as well as extend the ‘javafx.application.Application’ class so that we have the start method entry point for JavaFX.

The main method makes a call to the ‘launch() method passing any arguments passed to the program at run time.  The ‘launch()’ method then calls back the ‘start()’ method passing across the primary Stage for the application.

The ‘start()’ method sets the title on the title bar of the application, creates a new scene and adds the scene to the primary stage passed into the method.  The cascading style sheet used for the application is loaded into the scene and then the FXML file with the description of the user interface components is loaded into the ‘anchorPane’ that we used to create the scene.  The primary stage is then displayed.

The code for the class looks like this:

Just because we have already referenced the file, we will switch our attention to creating the FXML file for the user interface.  The file will be part of the ‘view’ package and we will call it ‘SpeechUI’.  Using Eclipse, you can create a new file of type FXML.  This gives us a stub of an FXML file which we can then use to launch Scene Builder.

(example of the FXML stub produced by Eclipse)

Once we have the file created and displayed in the ‘Package Explorer’ view we can right click on the file and open it in Scene Builder.

Scene Builder application displaying FXML document stub

Once all the fields are added to Scene Builder it will look something like this:

Scene Builder application showing Speech Tester User Interface

And when Scene Builder saves the changes it updates the FXML file and we have a file that looks like this:

Controller class

The one thing to note about the file sample above is that it is the completed file.  We still have a few steps left to get our output to match what is displayed above.  First off, we need to create a controller file for the user interface.  We do this by creating a new Java class in the same package as the FXML file.  I tend to call it the same as the FXML file but with ‘_Controller’ added to the end of it so that I know, it is the controller file for the interface file.

So, let’s create a new Java class called ‘SpeechUI_Controller’.  In earlier versions of JavaFX, you need to implement an interface to wire it up to the FXML but these days you do not need to.  What you do need to do if you want to exchange information between the controller and the interface is to declare the field names on both sides.  To set them in the controller class, one the line before declaring the variable declare that the variable is an FXML type by typing ‘@FXML’.  Then on the following line declare the variable as you would normally.  We will, of course, create types that match our fields we added to the FXML document.

Once we have our fields declared we then need to declare the callback method that the user interface will use to interact with the controller.  We do this by once again declaring the method using the ‘@FXML’ instruction followed by the method on the next line.

Within the ‘initialise()’ method we set any default values for fields as well as and dynamic data such as the list of voices available in the drop-down field.

The other connection we need to make is to connect our two buttons methods within the controller that will process any events they trigger.  We do this the same way as we did for the ‘initialise()’ and we will call the methods ‘handleOk()’ and ‘handleCancel()’.

The code for the controller looks like this:

Taking a closer look at the initialise method we see that it only has two lines.  The first is to clear out all the values that may already be associated with the voice drop-down field.  We do this because historically there use to be an issue with this type of field and this makes sure the field reflects the values we want.

The next line re-populates the drop-down list with the voices from the Voice Manager.  We do this by getting a handle to the list of items associated with the field and then calling the ‘addAll()’ method to add a list of Strings to the object.  We get the list of Strings from another class which we have not created yet but will look at next.  A call to ‘getVoiceNames()’ returns a list of names of the voices the Voice Manager is aware of.  This way we only offer voices that are supported by the manager.

The ‘handleOk()’ method as the name suggests processes the OK click event.  The method checks to see that a selection has been made for the voice.  We then check to see that there is some test to convert into sound by checking the words field has a length greater than zero.

Providing those two fields have values we are all set to make some sound.  However, before we do, we check to see if any of the other fields available to configure the sound have values.  If they do, then these values are set on the currently selected voice.

Once all the configuration settings have been applied, we then allocate the voice.  Next, we call the ‘showVoiceData()’ method, this is a method from another new class the VoiceInfo class and as the name suggests this is responsible for providing details about the voice.  We use this method to populate the text area field on the right-hand side of the application.

To convert the text to sound we call the ‘speak()’ method of the voice and then the ‘deallocate()’ to free up any resources we may have allocated.  That’s the job done.

Voices class

So now we have the controller sorted out we can go back and look at the Voices class which we use to manage the voices within our application.  This class is part of the ‘speech’ package and is called ‘Voices’.  The class is made up of 4 methods; all of them public.

The first of the methods we deal with here is the ‘getVoiceManager()’ method and this simply calls the FreeTTS VoiceManager class static method ‘getInstance()’.  The only real value of this method is that it also sets the mbrola.base property of the application to point at the location of the MBROLA speech engine as installed on the local client.

Next up is the ‘getVoices()’ method which returns an array of voices.  This is used to get a list of supported voices that the manager is aware of.

The ‘getVoiceNames()’ method makes use of the ‘getVoices()’ method to get a list of all the voices and from this, it creates a list of names of the voices.

The last method is the ‘getVoice()’ which is passed the name of a voice and returns the voice object that matches the name.  The voice object can then be used to convert the text to sound.

The Voices class looks like this:

 

VoiceInfo class

Next up we have the VoiceInfo class.  This class is part of the ‘speech’ package and has two public methods although only one is used here.

Essentially all this class does is take certain voice information and make it available to a target output.  Both methods are called ‘showVoiceData()’.  One of the methods accepts a voice object and prints out the details of the voice to the standard out device which in Eclipse is the console.  I originally compiled this method to help me see what was going with the voices and hence it is still here but not used.

The other method signature receives a Voice object and a TextArea object and does the same as the other method but this time the target output is the TextArea.  This method is used within the application to publish the voice details to the text area on the right-hand side of the user interface.

The code for the class looks like this:

That’s it, all the code for the application.   You can download the source code for this from the earlier blog post JavaFX and adding basic speech

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.