How to Disable Text to speech Using Javascript? - javascript

I have created a Samsung smart-tv app using javascript and now I want to disable the TTS in this app but don't know how I can do this please help.
I have tried using window.speechSynthesis but it is not working don't know why.
currently what i have done is when window load i call an init() function
function init(){
if ('speechSynthesis' in window) {
var synthesis = window.speechSynthesis;
synthesis.cancel();
} else {
console.log('Text-to-speech not supported.');
}
}
but it does not work and so finally i want to disable the feature of Text to speech from my application

You can't disable that feature. The SpeechSynthesis api is if you want to add extra functionality, not for disabling the native feature (which can only be disabled by users of your app from the TV/browser settings).
As written here: https://developer.samsung.com/smarttv/develop/legacy-platform-library/tv-functionality/accessibility.html
If user turns on Accessibility option for TTS in menu, TTS will read contents of HTML elements automatically.
You can try 2 things (which might not work):
Run every 1s (or more often) speechSynthesis.cancel() in a setInterval (I'm not sure this will stop the native TTS of the TV though).
setInterval(() => window.speechSynthesis.cancel(), 1000)
Replace window.speechSynthesis.speak with an empty function at the beginning of your app (considering Samsung TV uses this for speaking).
window.speechSynthesis.speak = () => {}

Please have a good reason to do so, disabling voice over is never a good choice. You are basically removing access to people with visual impairments and even if you did a bad job at making your app accessible that will always be better than just disabling it.
Having said that, there's no way to disable voice over using javascript but you can disable it by adding the following tag inside <widget> in your config.xml file:
<tizen:metadata key="http://samsung.com/tv/metadata/use.voiceguide" value="false" />

Related

Detect inverted screen in Cordova

How can I detect if the screen is inverted on at least iOS in Cordova? More specifically I’m looking to support the iOS 11 “smart invert” feature, however it doesn’t matter if this “invert detection” is also triggered by the “classic invert.”
I’ve seen the phonegap accessibility plugin, but I don’t see how to utilize it for this case without simply setting an interval to check it over and over again, which seems like too much of a hack to me. I’m looking for an event-based approach if possible.
Reading further, I missed the fact that the phonegap-mobile-accessibility plugin has events that you can listen to, including for invert colors. As such, using this plugin, you can bind an event as shown below:
window.addEventListener(
MobileAccessibilityNotifications.INVERT_COLORS_STATUS_CHANGED,
info => { // info.isInvertColorsEnabled });
As well, you can check the status at any time (e.g. on page load) like so:
MobileAccessibility.isInvertColorsEnabled(
b => { // typeof b == “boolean” });

Turn Off Youtube Annotations Using JavaScript

There’re currently three ways I know of, to disable annotations in youtube videos:
You can use the YouTube settings. This will not work for me, as I do not have (nor want) an account.
You can use a specialised extension. That might work, but I’d rather not have a full-fledge extension with a ton of options, just for that.
You can use a (ad)blocking extension, and add ||youtube.com/annotations_ to its filters. That suffers from the same issue as the previous point. In addition, it disables them completely, while I simply want them turned off by default (so I have the option to turn them on).
Is it possible to do it using JavaScript? I have a UserScript that already performs some modifications to YouTube’s website, so ideally I’d like to expand it. That’s really the last thing I’m missing.
I ask that answers be constrained to using JS and not browser extensions recommendations. Both because (as mentioned), I already know about those, and because this is as much about the learning process as it is about the result. It’s practice for more UserScripts.
Since youtube sometimes changes the players’s behaviour, I’ll try to keep the code up to date and as robust as possible.
var settings_button = document.querySelector(".ytp-settings-button");
settings_button.click(); settings_button.click(); // open and close settings, so annotations label is created
var all_labels = document.getElementsByClassName("ytp-menuitem-label");
for (var i = 0; i < all_labels.length; i++) {
if ((all_labels[i].innerHTML == "Annotations") && (all_labels[i].parentNode.getAttribute("aria-checked") == "true")) { // find the correct label and see if it is active
all_labels[i].click(); // and in that case, click it
}
}
User's code is correct, settings need to be click & then:
document.querySelectorAll("div[role='menuitemcheckbox']")[1].click()
I added it to my "turn off autoplay & annotations" script: https://gist.github.com/Sytric/4700ee977f427e22c9b0
Previously working JS:
document.querySelectorAll("div[aria-labelledby=\"ytp-menu-iv\"]")[0].click()
I know you don't want to use an extension for this but it is the most flexible and easy way to solve your problem.
Extension gives us the power to use a background script through which we can inject css and javascript to opened web page.
I made one extension on this
https://chrome.google.com/webstore/detail/hide-labels-and-end-cards/jinenhpepbpkepablpjjchejlabbpken
This also has a stop-start button for which I just inject the opposite code as before.
If you need any further help on this, i will be happy to do so.
iv_load_policy (supported players: AS3, AS2, HTML5)
Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotations to not be shown by default.
Here is a nice solution, just hide the div with annotations
$("div.video-annotations").css("display", "none");

Video.js enter fullscreen on play

I've been searching around for a long time but still haven't found a valid solution for my problem. I just cant seem to get the video player to enter fullscreen. The API does have many examples but none of them seem to work.
The jQuery version included on the page I am currently working on is 1.8.2. Also, I am using parallax-1.1.js and libraries required for it to work properly so that may also be an issue.
The client I am working for wants the site to have responsive design, with the ability of the player to directly go to fullscreen when the "Play" button is clicked. This functionality should be avalable both on desktop, and mobile/tablet browsers. On the video page, there should be 3 video players, each of them has unique IDs, and they also have a common CSS class.
Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.
Example:
player1 = _V_('video-1');
player1.on("play",
function () {
this.requestFullScreen();
});
player1.on("ended",
function () {
this.cancelFullScreen();
});
The code generates this error:
Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'
I am working with the latest version of Google Chrome.
There are a two problems to be solved here.
First, you cannot go to full screen inside a 'play' event handler. For security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule. So you need to move this to a 'click' handler on the actual play button.
The second is a big problem with Video.js 4.0.x, which is that it's minified using Google Closure Compiler with Advanced Optimizations. So many of the public properties and methods are obfuscated, making them difficult/impossible to use. In this case, requestFullScreen is now player1.Pa(). And, as far as I can tell, cancelFullScreen doesn't exist at all.
Here are some options for how to handle this:
Use the obfuscated method name. I don't recommend this, because a) the name will change with every minor version upgrade (e.g. 4.0.5) and b) it will make your code unreadable, and c) you can't use cancelFullScreen.
Get an un-minified copy video.js and host it yourself. (You can use Uglify or another minifier that won't mess with the method names.) Video.js doesn't provide this file, so you have to clone the git repo and run the build script yourself. And you don't get the advantage of using video.js's CDN for free.
Use an older version of video.js and wait until 4.x is ready for prime time.
Don't use video.js at all. Consider jPlayer and jwPlayer or roll your own.
I recommend 2 or 3.
Update: It looks like this particular issue has been fixed, but it has not made it into release yet.
I personally used a custom link that triggers both play and fullscreen.
<a class="enter-fullscreen" href="#">Play fullscreen</a>
And the js part:
<script type="text/javascript">
$('.enter-fullscreen').click(function(e) {
e.preventDefault();
$('.vjs-play-control').click();
$('.vjs-fullscreen-control').click();
});
</script>
This is improvable but simple and does the job.
One easy way to solve the problem:
document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)
Video goes full screen and the regular event of the play button causes it to start playing.
in video.js file go to this lines
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
and add
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
document.getElementsByClassName('vjs-fullscreen-control')[0].click()
// exit early if clicked via the mouse
if (this.mouseused_ && event.clientX && event.clientY) {
silencePromise(playPromise);
return;
}

windows 8 metro style app - find mouse or touch based execution

I am creating one app for Windows 8 Metro style app using HTML 5 and JavaScript. I require to find at launch of the app whether it will be touch base process or mouse based process (smartphone or desktop computer).
I tried following things.
1) As per following,
http://msdn.microsoft.com/en-us/library/windows/apps/windows.devices.input.pointerdevicetype.aspx
but we are not sure what to pass in as “pdt” in function getPointerDeviceType(pdt)
Tried various things but it return me “undefined” only.
2) We tried Modernizr js framework to find for following code
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
But when we insert the latest js code of “Modernizr”, it gives us security error for appendchild command. Something like
“0x800c001c - JavaScript runtime error: Unable to add dynamic content.”
Can anyone please tell how we can achieve so that based on condition, we can execute code for touch based and mouse based execution of app.
Just got it solved. Can come useful for others.
I Put following code on which i need to find which css i need to apply.
helloButton.addEventListener("MSPointerDown", buttonClickHandler, false);
Here is the function:
function buttonClickHandler(eventInfo) {
if (eventInfo.pointerType == eventInfo.MSPOINTER_TYPE_TOUCH) {
// Do something for touch input only
console.log('Touch');
} else {
// Do something for non-touch input
console.log('Mouse');
}
}
You can set your code as per condition.
Your assumption that the app will only have one input type for the duration of execution is a bad one -- I change between mouse, keyboard, and touch on my devices all the time.
That stated:
If you are dynamically adding Modernizr, just include the Modernizer as a script tag in your HTML rather than adding dynamically
You need to use Windows.Devices.Input.PointerDevice.GetPointerDevices(); to get the devices, and then see which ones support touch using the function in the link you provided. (Details here)
You can detect which type of device a specific input event was for (e.g. onmspointerup et al), by looking at the pointerType property on the event object.

Why click() doesn't work on object tag <object>?

I'm trying to make an extension for google chrome. It will automatically click on the speaker icon in the google dictionary's result to make it pronounces the word automatically.
http://www.google.com/dictionary?langpair=en|en&q=love&hl=en&aq=f
i'm using this code: document.getElementById("pronunciation").click()
however, i wonder why it doesn't work? actually tag does support the standard methods - as w3schools wrote: http://www.w3schools.com/jsref/dom_obj_object.asp
Can you suggest any method in order to make it works?
Since the object is flash, sending it a click event will not work unless Google built click support into the flash file -- which they apparently didn't.
However, the actual audio file is a parameter to the flash program, and linked to in a child node.
For the given example, it is: "http://www.gstatic.com/dictionary/static/sounds/de/0/love.mp3".
This can be obtained with:
var soundFile = document.querySelector ("#pronunciation a").href;
Then pass this file to a library, such as SoundManager 2, and your script can play it automatically (may your coworkers/family have mercy on your soul. :) ).
The play icon is a flash player.
Most likely the onclick event isn't on the stage (i don't know if that would even work with a click on the object) but on a element inside the flash.

Categories

Resources