Xamarin Forms: How to highlight text and pause/play audio of text to speech?

Question

I am using the xamarin essentials package for text to speech feature. When speech the text I need to highlight the corresponding text. Also, I need an option to pause/play the speech. Please see this video.

Screenshot:

How can I achieve highlight text feature and pause/play audio as the video?

Answer 1

highlight text feature

You could splite the Text of Label . And use Span to set the highlight .

in xaml

<StackLayout x:Name="firstPage" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">

  <Label  x:Name="label"  WidthRequest="250" HeightRequest="300" />


  <Button Text="start" Clicked="Button_Clicked" />

</StackLayout>

in Code Behind

public partial class MainPage : ContentPage
{

    string[] strList;

    public MainPage()
    {
        InitializeComponent();

        string content = "Each platform supports different locales,\n to speak back text in different languages and accents.\n Platforms have different codes and ways of specifying the locale, \n  which is why Xamarin provides a cross-platform Locale class and a way to query them with GetLocalesAsync.\n ";

        label.Text = content;

        string str = ".";
        char character = char.Parse(str);

        string str2 = ",";
        char character2 = char.Parse(str2);

        strList = content.Split(new char[] { character,character2 });



    }

    private async void Button_Clicked(object sender, EventArgs e)
    {
        for (int i=0;i< strList.Length;i++)
        {
            string content = strList[i];

            var formattedString = new FormattedString();

            for (int j=0;j<strList.Length;j++)
            {
                
                if(i==j)
                {
                    formattedString.Spans.Add(new Span { Text = strList[j], ForegroundColor = Color.Black, BackgroundColor = Color.Gray });
                }

                else
                {
                    formattedString.Spans.Add(new Span { Text = strList[j], ForegroundColor = Color.Black, });
                }
                

            }

            label.FormattedText = formattedString;

            //Using a bool varibale we can pause the TTS fucntion, when press back button set the value of StopTTS to true.
            //When loading this set the value back to false.
            if (!Utility.StopTTS)
            {
                await TextToSpeech.SpeakAsync(content);
            }

        }
    }
    
    protected override bool OnBackButtonPressed()
    {
        Utility.StopTTS = true;
        return base.OnBackButtonPressed();
    }


}