In this blog, let’s learn to create a simple Text-To-Speech application using Tizen TTS (Text-To-Speech) APIs, and also to design the application UI using XAML.

This simple Text-To-Speech application demonstrates the usage of TTS Module which is a part of Tizen C# Native Modules. In this application, the usage of the TTS Module allows the text given by a user as input and then produces its speech output. This application outlines the major APIs of the TTS Module and provides its sample usage.

Prerequisites

The content presented in this blog is based on the assumption that you understand the structure of Tizen .NET application, and how to design the UI using XAML file. If not, refer to the Drumpad application.

Steps

The following are the steps involved in creating the Text-To-Speech application:

1. Creating the Project
2. Creating UI for the Application
3. Creating the TTS Instance
4. Preparing the TTS Instance
5. Binding Button Click Event to Play and Stop the Speech Output
6. Running the Application
7. Viewing Logs

Creating the Project

First, let’s create a Tizen Xamarin.Forms Single application. To do so, perform the following steps:

1. On the Visual Studio menu, go to File > New > Project.

The New Project screen is displayed.

2. Go to Templates > Visual C# > Tizen and select Blank App (Tizen Xamarin.Forms Single).
3. Enter the Name, Location, and Solution name. For example, in the above screenshot, the app is named as TTSDemo.
4. Click OK to create the project.

Once the project is created, the general structure of the application is displayed as follows:

Creating UI for the Application

Now that you have created the project, let’s use XAML to create the UI. For information on XAML, refer to eXtensible Application Markup Language (XAML).

To create the UI, perform the following:

1. In the Solution Explorer pane, right-click TTSDemo.Tizen and click Add > New Item.

The Add New Item – TTSDemo.Tizen screen is displayed.

2. Select the required XAML template for content page as shown in the following screenshot.

3. Name the page as MainPage.xaml and click Add.
4. Replace the code under MainPage.xaml with the following code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TTSDemo.Tizen.MainPage"
             Title="Text To Speech Demo">
    <StackLayout>

        <Editor x:Name="_editorCell"
                Text=""
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="CenterAndExpand"
                FontSize="Large"
                HeightRequest="500"
                WidthRequest="700"
                BackgroundColor="White"/>

        <Button x:Name="_playBtn"
                Text="Play"
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="CenterAndExpand"
                BackgroundColor="Blue"/>

        <Button x:Name="_stopBtn"
                Text="Stop"
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="CenterAndExpand"
                IsEnabled="False"
                IsVisible="True"
                BackgroundColor="Blue"/>

    </StackLayout>
</ContentPage>

Using the above code snippet, you can create a:

• Text editor to enter the user inputs
• Button “Play” to start the speech output
• Button “Stop” to stop the speech output if required

MainPage.xaml has a corresponding MainPage.xaml.cs file where the events can be handled when the user clicks the Play and Stop buttons. Set MainPage as the Main Page of the application in TTSDemo.cs by setting MainPage as “MainPage = new MainPage()” in App constructor.

Build and run the application.

The following is the screenshot of the application:

Now that the UI is created, let’s start implementing the Text-To-Speech functionality.

Creating the TTS Instance

The first step is to create an instance of TTS. Create a TTS instance when the main page is created, having _ttsInst as a private member of the MainPage class as follows:

private TtsClient _ttsInst = new TtsClient();

Preparing the TTS Instance

Ensure to prepare the TTS instance before it can be used for text to speech conversion purpose. You can do this in the constructor of the MainPage class as follows:

_ttsInst.StateChanged += _ttsInst_StateChanged;
_ttsInst.Prepare();

Add an event handler to know about the state change of the TTS object. To add text for text to speech conversion, the TTS object must be in the “Ready” state. Since the state transition happens fast, the user need not wait for it. The state transition to prepared state happens by the time the user is ready to give the text input.

Binding Button Click Event to Play and Stop the Speech Output

In the MainPage.xaml.cs file, after the InitializeComponent() function, add event handlers for the Play and Stop buttons as shown in the following code example:

_playBtn.Clicked += (sender, e) =>
            {
                string text = _editorCell.Text;
                if (!String.IsNullOrEmpty(text))
                {
                    try
                    {
                        _ttsInst.AddText(text, "en_US", 0, 0);
                        _ttsInst.Play();
                        _editorCell.Text = "";
                        _playBtn.IsEnabled = false;
                        _stopBtn.IsEnabled = true;
                    }
                    catch (Exception ex)
                    {
                        global::Tizen.Log.Error("TTSDemo", ex.ToString());
                    }
                }
            };

_stopBtn.Clicked += (sender, e) =>
            {
                try
                {
                    _ttsInst.Stop();
                    _stopBtn.IsEnabled = false;
                    _playBtn.IsEnabled = true;
                }
                catch (Exception ex)
                {
                    global::Tizen.Log.Error("TTSDemo ", ex.ToString());
                }
            };

In the above code example, the US English is considered as the default language and the Voice Type as automatic.

The Play button functionality can be described as follows:

1. Enter the input text in the editor
2. Clear the input text in the editor
3. Toggle the Play and Stop buttons

The Stop button functionality can be described as follows:

1. Stop the speech output
2. Toggle the Play and Stop buttons

The following code example provides the complete MainPage class in MainPage.xaml.cs:

namespace TTSDemo.Tizen
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPage : ContentPage
    {
        private TtsClient _ttsInst = new TtsClient();

        public MainPage()
        {
            InitializeComponent();
            _ttsInst.StateChanged += _ttsInst_StateChanged;
            _ttsInst.Prepare();

            _playBtn.Clicked += (sender, e) =>
            {
                string text = _editorCell.Text;
                if (!String.IsNullOrEmpty(text))
                {
                    try
                    {
                        _ttsInst.AddText(text, "en_US", 0, 0);
                        _ttsInst.Play();
                        _editorCell.Text = "";
                        _playBtn.IsEnabled = false;
                        _stopBtn.IsEnabled = true;
                    }
                    catch (Exception ex)
                    {
                        global::Tizen.Log.Error("TTSDemo", ex.ToString());
                    }
                }
            };

            _stopBtn.Clicked += (sender, e) =>
            {
                try
                {
                    _ttsInst.Stop();
                    _stopBtn.IsEnabled = false;
                    _playBtn.IsEnabled = true;
                }
                catch (Exception ex)
                {
                    global::Tizen.Log.Error("TTSDemo", ex.ToString());
                }
            };
        }
        ~MainPage()
        {
            _ttsInst.Unprepare();
            _ttsInst.StateChanged -= _ttsInst_StateChanged;
        }

        private void _ttsInst_StateChanged(object sender, StateChangedEventArgs e)
        {
            global::Tizen.Log.Info("TTSDemo", " Previous:" + e.Previous + " Current:" + e.Current);
        }
    }
}

Running the Application

Press CTRL+F5 to launch the application on the device/emulator. Click the Play button to listen to the corresponding text entered in the editor. Click the Stop button to stop the speech output if it is not completed.

Viewing Logs

To view the application logs, go to Tools > Tizen and click Tizen Log Viewer.

The application logs are displayed as follows:

To view the current application logs, filter the logs using the tag “TTSDemo”.

For more details, refer to the attached source.