chinese-words-separator / chinese-words-separator.github.io

5 stars 1 forks source link

The "play sound on hover" doesn't work on kivi browser on tablet #7

Closed srghma closed 1 year ago

srghma commented 1 year ago
  1. Mobile doesn't have hover

Solution: add play sound on first and subsequent clicks

  1. I even tried the hover with stylus (it shows the dot when stylus is near the screen) - doesn't work

Solution: handle stylus hover

chinese-words-separator commented 1 year ago

Supposedly, automatically playing sound on hover should work on Kiwi, it is using Chrome TTS API. Using Chrome TTS API is the only way to automatically play sound on hover. In fact, about a year ago, playing sound on hover was working on Kiwi. But it looks like Kiwi now denies Chrome TTS API access, see screenshot below

console.log('tts', Boolean(chrome.tts));

Even though the the .tts object is present on chrome object, Kiwi denies access to it

kiwi-browser-tts-denied

SpeechSynthesis API is even more restrictive, it allows access to the API through direct user interaction (e.g., click) only; however, hover is not a direct user interaction, so we cannot use SpeechSynthesis API to automatically play sound on hover, be it desktop or mobile. SpeechSynthesis API won’t work when it is hooked on hover event

Though you are tapping on screen to show CWS’s dictionary, it is hooked on mouseover and mouseenter (which are hover events). CWS on Kiwi uses the same codebase of CWS on Chrome, there is no special code on CWS to activate dictionary based on tap, stylus, and whatnot

However, even if we make a special hover code for stylus or other pointing device, but since Kiwi now denies Chrome TTS API, we won’t be able to play a sound with Chrome TTS API on Kiwi when a stylus is hovered

Having said that, on latest CWS (version 8.24.84.1091). You can now tap on pinyin(or zhuyin) on the dictionary to manually play back the sound. Caveat, though accurate most of the time, it is not playing back the sound of the pinyin directly, some words have multiple readings (e.g., 的, pronounced either of the following: de, dé, dí, dì, dī), it only plays back the sound of de (the most common reading of 的), even if you click dé, dí, dì, dī, those will still be played as de

Interestingly enough, accurate reading of pinyin works on Apple platform only, i.e., Safari on Mac, iPhone, iPad, and even on Chrome on Mac; de, dé, dí, dì, dī are all played back exactly how it is written phonetically. I tested Chrome on Windows, it cannot play back the sound of the pinyin directly, no sound is coming out. So I made a detection on CWS that if it is running on non-Apple platform, the SpeechSynthesis API should read the hanzi character instead of the pinyin, at least there is a fallback sound that can be played. So just like its Kiwi cousin, Chrome on Windows can only play back the most common reading of a hanzi character; so in case of 的, its sound is played back as de only, so even if you clicked on dé, dí, dì, dī on non-Apple platform, it will still be played back as de. I digress

If you still want to automatically play back the sound whenever the dictionary is shown on Kiwi, you can use Bing’s read aloud functionality. To use Bing, click the Bing icon (encircled) as shown below:

kiwi-browser-use-bing-for-tts

And then check the automatic read aloud:

kiwi-browser-use-bing-check-read-aloud

Then go back to the page you are reading. Now every time the dictionary is shown, the sound will be automatically played courtesy of Bing

I hazard a guess that stylus on Windows tablets or Chromebook tablets will work as hover/mouseover, but that will incur buying another device

srghma commented 1 year ago

Screenshot_20230226-075919_Kiwi Browser

You're right, it's not the hover, it's tts

https://chrome.google.com/webstore/detail/read-aloud-a-text-to-spee/hdhinadidafjejdhmfkjgnolgimiaplp?hl=en

this extension has interesting approach - it opens a new tab

srghma commented 1 year ago

Can we use google translate tts maybe, if local doesnt work?

chinese-words-separator commented 1 year ago

Tried that June last year, but Google Translate refuses to return a handle on its window, so postMessageing to an existing opened Google Translate window will not work. Thus Google Translate can't be used to send/trigger (and returning back information, e.g., for notifying the translated text back to the caller (e.g., CWS)) text-to-speech

Opted to use Bing instead. Can also use DeepL's text-to-speech, but just like the local TTS, DeepL sounds robotic. Bing has human-sounding text-to-speech; on phrase or sentence that are long, it pauses correctly on where it should pause in the phrase or sentence. Learners can learn easily if he/she can sense where the cluster of words start and ends, Bing's natural sounding text-to-speech and correct pauses (as far as I can tell it has good accuracy on where it should pause) immensely helps a lot on that

You try Bing Translate it sounds nice, the default speed of local TTS is too fast, it has to be set to 20% slower speed to at least make it talk at a normal speed of human speech; but still, local TTS doesn't pause in between cluster of words

chinese-words-separator commented 1 year ago

By the way, the local TTS works on CWS's dictionary on Kiwi; when the dictionary is opened, tap the pinyin or the loud-speaker icon, then the sound will be played. It's not as convenient or as automatic as its desktop counterpart that plays a sound as soon as you hover a word though. The desktop counterpart will even automatically play sound even if the dictionary is turned off

srghma commented 1 year ago

Maybe detect if the chrome tts is available and if not - then play using Bing on hover?

P. S. I just would like to read books, using Samsung tablet and kiwi browser, with "play sound on hover", it is a very fast method to check myself

chinese-words-separator commented 1 year ago

Maybe detect if the chrome tts is available and if not - then play using Bing on hover?

P. S. I just would like to read books, using Samsung tablet and kiwi browser, with "play sound on hover", it is a very fast method to check myself

Here's a video instruction how to use read aloud on CWS using Bing: https://www.youtube.com/watch?v=UlPRPBe1D-g

Let me know if the steps on the video work on your end or not. It would be best if you record a video of the steps how you are doing it and upload it to YouTube, so it can be determined what step(s) you missed and whatnot

srghma commented 1 year ago

No need to make a video, it's just "open kiwi browser on tablet, visit Wikipedia, hover with stylus pen on a word without pressing, and the sound is not played, expected state - the sound is played"


Maybe better to allow a user to use different tts in the settings page

tts provider on hover:

https://github.com/srghma-chinese2/srghma-chinese2.github.io/blob/c8405986e3d709e01d9dcce6a75cf8e4268c8f5c/list-of-sentences-common.js#L83-L96 here first played a sound by Baidu, then Google

chinese-words-separator commented 1 year ago

No need to make a video, it's just "open kiwi browser on tablet, visit Wikipedia, hover with stylus pen on a word without pressing, and the sound is not played, expected state - the sound is played"

On the video I provided, I hover the stylus pen without pressing the text on purepen.com, the sound is played (as long as you don't close Bing's page). Tried on this page too, the sound is played when just hovering the text with stylus pen, no press on text needed https://zh.m.wikipedia.org/wiki/Wikipedia:首页

Maybe better to allow a user to use different tts in the settings page tts provider on hover: chrome browser tts (default, works offline)

If you are still expecting Kiwi browser's default tts API to work, it cannot work, Kiwi now denies access to the API. The details was in our conversation last month. The current workaround for read aloud on hover is to open Bing translator's page by clicking the Bing translator icon on CWS's dictionary, and then leave Bing's page open, then go back to the page you are reading; afterwards, the text's audio from Bing will be played automatically whenever text is hovered on the page you are reading. As verified (made a video on it), no need to press the text, hovering the stylus pen on the text will automatically play the sound from Bing translator's page

As for dynamically loading the audio file from a URL, I'll try the code you provided

chinese-words-separator commented 1 year ago

I tried loading the audio dynamically from a URL using your site that uses the code you provided, it does not seem to work?

Repro steps:

Should it play the sound upon clicking Audio load? It's not playing the sound

image