2918: Add tts on web

[bahaaTuffaha]

Short description

Adding text-to-speech functionality for web.

Proposed changes

• TtsPlayer.tsx will receive content and title from useTtsPlayer.ts hook then it will process content as following:

  • Adding period to any <p> or <li> tag if there is non at the end.
  • Splitting the content using a library sentencex to support most languages.
  • Adding the title to the array.

• TtsPlayer.tsx using EasySpeech library for web speech api .. why I used it instead of directly using the native api read here: https://github.com/leaonline/easy-speech/blob/master/FAQ.md#why-does-this-library-exists-if-i-can-use-tts-natively-in-the-browser

• Web Speech API has some limitation on devices like Android I can't pause so I implemented a way to increment currentSentencesIndex at each sentence so pausing will be depend on sentence index . Another issue with Firefox about triggering onEnd function at any .cancel() method unlike chromium based browsers.

• This is different from tts-native: voices needs to be installed from OS so a modal will show up TtsHelpModal to guide users for each platform. Note: by default for windows for example you have what the keyboard layout have of languages also it may need a restart to see the newly installed language.

• Modified Modal.tsx to accept new props: icon and styling just for (backgroundColor, borderRadius)

Side effects

• CityContentToolbar.tsx, CategoriesPage.tsx, LocalNewsPage.tsx, TuNewsDetailPage.tsx, RemoteContent.tsx, RootSwitcher.tsx

Testing

• At integreat : Go to any 3rd level content in categories or news.
• Click on ToolbarItem on the side called readAloud
• The player will show up press play to make it start reading content.

Observations

I tested this PR on linux and I got different result at each browser:
Chrome: works as expected + nice voices.
Firefox: I can't pause (linux) + using opensource voice library from mbrola mb-en1 sounds robotic better sounded voices can be downloaded from pied (Note: you need to restart the browser after selecting a voice).
Brave: (linux) not working at all because there is no build in speech to text like google chrome does.
Windows on the other hand.. most browsers can run good as long you download the voices from the OS it self.
I didn't test it on mac OS...

Resolved issues

Fixes: #2918

---

[ztefanie]

Nice work 🚀

Tested this on chrome and firefox.

Firefox voice is really crappy, but chrome is really nice 🚀 Maybe we add hint, that some browsers better support this feature? Maybe @hauf-toni can share some input, how to handle this best from a UI perspective.

Found a few bug:

issue 1:

1. Open this page: http://localhost:9000/augsburg/de/willkommen/willkommen-in-augsburg-2
2. Click "read aloud"
3. Click "play"
4. Click on "Weiter"
   Result: The reader starts reading out the beginning of the current sentance, when clicking "weiter" for the first time. When clicking "weiter" a second time, it correctly jumps to the next sentance
   Expected result: When clicking "weiter" for the first time, it should directly jump to the next sentance.

issue 2:
When opening this page: http://localhost:9000/augsburg/de/willkommen
the "read aloud" button is displayed, but does nothing when clicked.
Expected: Should either not be displayed or does something when clicked

issue 3:
Open this page: http://localhost:9000/augsburg/de/behoerden-beratung/behoerden/auslaenderbehoerde
Click "next" to jump to the last sentance
in this line "Weitere Informationen finden Sie unter [hier]" the reader switches to the "start"-mode, but there is still this whole contact blog that is read

issue 4:
When clicking pause I see the initial view of the tts-player, with the first word of the page in the heading. I think this is confusing, as clicking play does not continue reading from the beginning. I would expect that the player just changes the pause button to showing a play button.
what i get when i click pause

what i expected

issue 5:
on firefox when the tts reaches the end of the text, the player does not reset to start as it is for other browsers.

[bahaaTuffaha]

issue 1:

1. Open this page: http://localhost:9000/augsburg/de/willkommen/willkommen-in-augsburg-2
2. Click "read aloud"
3. Click "play"
4. Click on "Weiter"
   Result: The reader starts reading out the beginning of the current sentance, when clicking "weiter" for the first time. When clicking "weiter" a second time, it correctly jumps to the next sentance
   Expected result: When clicking "weiter" for the first time, it should directly jump to the next sentance.

issue 2: When opening this page: http://localhost:9000/augsburg/de/willkommen the "read aloud" button is displayed, but does nothing when clicked. Expected: Should either not be displayed or does something when clicked

issue 3: Open this page: http://localhost:9000/augsburg/de/behoerden-beratung/behoerden/auslaenderbehoerde Click "next" to jump to the last sentance in this line "Weitere Informationen finden Sie unter [hier]" the reader switches to the "start"-mode, but there is still this whole contact blog that is read

Can you please mention which browser you used for each issue?

[ztefanie]

Can you please mention which browser you used for each issue?

I mostly used Chrome, sometimes I double checked with Firefox

[f1sh1918]

@bahaaTuffaha i just found one issue.

1. Go to a third level page and open the player
2. Move to a first level page
3. The Play button should be disabled if there is nothing to read. At least its the case for native implementation

And we may create a issue for tts voices improvement for safari (or disable it for safari) its really horrible

[steffenkleinle]

❓ Why do we need periods here now?

[bahaaTuffaha]

hmm .. not actually needed for native but keeping the web and native consistent.
In general I think tts for native works differently and as I remember it didn't need a period to figure out when to stop unlike web.

[steffenkleinle]

Could reproduce on firefox linux.

Actually, I can't. Everything works as expected for me and the tts correctly jumps to the next sentence after each utterance/sentence, even without adding extra periods. Could you please test this and add concrete info on how to reproduce this?

[bahaaTuffaha]

Actually, I can't. Everything works as expected for me and the tts correctly jumps to the next sentence after each utterance/sentence, even without adding extra periods. Could you please test this and add concrete info on how to reproduce this?

Comment out the following lines at ttsDomManipulation.ts:
appendPeriod(paragraphs)
appendPeriod(listItems)

At firefox (anything doesn't have a full stop at the end will continue reading like lists):
http://localhost:9000/muenchen/en/everyday-life/information-on-insurance-contracts-shopping-invoices-reminders-finances/bank-account

[steffenkleinle]

Could you please check #3150 if this works as expected for you there? With my proposal I can't find any issues.

Stale