Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

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

SreeeeSreeee INMember ✭✭✭✭✭

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:

enter image description here

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

Best Answer

  • SreeeeSreeee INMember ✭✭✭✭✭
    Accepted Answer

    @jezh Got a solution for this :)

    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();
        }
    
    
    }
    

    enter image description here

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Currently, it seems that the Xamarin.Essentials: Text-to-Speech doesn't have the function of highlighting text and pausing/playing audio.

    But I have posted a new issue about this feature request, you can follow up it here:
    https://github.com/xamarin/Essentials/issues/1323

  • SreeeeSreeee INMember ✭✭✭✭✭

    @jezh Thanks :)

    I found another package by Jamesmontemagno, Is this package offer these features?

  • jezhjezh Member, Xamarin Team Xamurai

    No, this package does not support this feature either: https://github.com/jamesmontemagno/TextToSpeechPlugin/issues/57

  • SreeeeSreeee INMember ✭✭✭✭✭
    Accepted Answer

    @jezh Got a solution for this :)

    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();
        }
    
    
    }
    

    enter image description here

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited July 8

    @jezh But I have a problem with this approach :'(

    My data is HTML. Currently, I am using a normal label with text-type HTML, so when showing the data initially there will be no issues. But when TTS starts the text is changing to HTML. See below screenshot:

    I hope you have a solution for this :)

Sign In or Register to comment.