How can I get female voice by Web Speech API in Google Chrome - web

In a webpage, I want a female voice to speak my texts. I tried to do this by following code. But still now male voice is talking. How can I arrange a female voice to talk my texts? Can anybody share me a correct code that works in Google Chrome.
var voices = speechSynthesis.getVoices();
var msg = new SpeechSynthesisUtterance("Hello World!");
msg.default=false;
msg.localservice=true;
msg.lang = "en-GB";
msg.voice = voices[3].name;
speechSynthesis.speak(msg);

The below code worked for me. I hope it works for you.
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[3];
msg.text = "Hello World";
speechSynthesis.speak(msg);
On the 1st try it might give out male's voice. But on the 2nd attempt (without refreshing) it will give out the female's voice and try deploying it on a dummy server, there it will work like a charm in the first go.

This happens to me that the voice doesn't change at the first time the page is loaded.
I found a solution that works for me.
getVoices() should be triggered when the document is ready.
So I add at the top of my js like this.
$(document).ready(function() {
var voices = window.speechSynthesis.getVoices();
})

On Chrome, I do something like this:
<html>
<head>
<script>
function speak(language, country, preferredNames, text) {
var resolvePromise;
var promise = new Promise(r => resolvePromise = r);
var voices = window.speechSynthesis.getVoices();
if (voices.length == 0) {
new Promise(r => {
window.speechSynthesis.onvoiceschanged = () => {
window.speechSynthesis.onvoiceschanged = null;
r();
};
})
.then(() => speak(language, country, preferredNames, text))
.then(resolvePromise);
} else {
var msg = new SpeechSynthesisUtterance(text);
voices.sort((a, b) => {
if (language != null) {
var matchA = a.lang.indexOf(language + "-") == 0;
var matchB = b.lang.indexOf(language + "-") == 0;
if (! matchA && ! matchB) return 0;
if (! matchA && matchB) return 1;
if (! matchB && matchA) return -1;
}
if (country != null) {
var matchA = a.lang.indexOf("-" + country) == a.lang.length - ("-" + country).length;
var matchB = b.lang.indexOf("-" + country) == b.lang.length - ("-" + country).length;
if (! matchA && ! matchB) return 0;
if (! matchA && matchB) return 1;
if (! matchB && matchA) return -1;
}
if (preferredNames != null) {
var indexA = voices.length;
var indexB = voices.length;
preferredNames.forEach((e, i) => {
if (indexA == voices.length && a.name.match(e) != null) indexA = i;
if (indexB == voices.length && b.name.match(e) != null) indexB = i;
});
return indexA - indexB;
}
return 0;
});
if (voices.length > 0) msg.voice = voices[0];
if (language != null) {
msg.lang = language;
if (country != null) msg.lang += "-" + country;
}
msg.onend = resolvePromise;
window.speechSynthesis.speak(msg);
// msg.onend not triggered without call to console.log(msg)?
console.log(msg);
}
return promise;
}
speak("en", null, [ /Google US English/, /Samantha/, /Fiona/, /Victoria/, /female/i ], "Hello, world.")
.then(() => speak("en", null, [ /female/i ], "Hello, world."))
.then(() => speak("en", "US", [ /female/i ], "Hello, world."))
.then(() => speak("en", "US", null, "Hello, world."))
.then(() => speak("en", "GB", [ /\Wmale/i ], "Hello, world."));
</script>
</head>
<body>
</body>
</html>

This code worked for me.
var speakObj = new SpeechSynthesisUtterance();
speakObj.text = text;
speakObj.voice = speechSynthesis.getVoices().filter(function(voice) {
return voice.name == "Google UK English Female"
})[0];
window.speechSynthesis.speak(speakObj);

After a long time of troubleshooting, I could figure out the solution.
4 persons already suggested me some solutions. But these did not work for me. But helped me to figure out the solution. Thanks to all of them.
To solve the problem, I did two things.
I had to load voices during onvoiceschanged event as follows:
var voices;
window.speechSynthesis.onvoiceschanged = function() {
voices=window.speechSynthesis.getVoices();
};
I found this tip from this link.
'Google UK English Female' does not work for me. So I used 'Microsoft Zira Desktop - English (United States)' as follows:
speech.voice = voices.filter(function(voice) { return voice.name == 'Microsoft Zira Desktop - English (United States)'; })[0];

Related

how to change the color of events in Sharepoint Calendar based on the categories

I want to have different background colors for the different events based on selected categories
Json that I am using
{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
“elmType”: “div”,
“txtContent”: “#currentField”,
“style”: {
“background-color”: “=if(#currentField == ‘Out Of Office - LabOps’, ‘#2BBBAD’, if(#currentField == ‘Out Of Office - Tools & Monitoring’, ‘#4285F4’, if(#currentField == ‘Out Of Office - Billing & Provisioning’, ‘#aa66cc’, if(#currentField == ‘Out Of Office - Infrastructure’, ‘#bbdefb’, if(#currentField == ‘Out of Office - Networking Team’, ‘#cddc39’, ‘’ )))))”
}
}
nothing is changing the background color
can anyone help me here I also looked into this solution and tried to get the json and modified the same for me but still not luck
https://sharepoint.stackexchange.com/questions/273991/apply-background-color-to-list-using-column-formatting-based-on-text
#Muhammad,
I remember that column formatting is only available on modern UI. For classical view, please take a reference of below code:
ExecuteOrDelayUntilScriptLoaded(CustomizeCalendarEvents, "SP.UI.ApplicationPages.Calendar.js");
function CustomizeCalendarEvents() {
//Week or Day Calendar View
SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids_Old =
SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids;
SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids =
function SP_UI_ApplicationPages_DetailCalendarView$renderGrids($p0) {
this.renderGrids_Old($p0);
onCalendarGridsRendered($p0);
};
//Month Calendar View
SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids_Old =
SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids;
SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids =
function SP_UI_ApplicationPages_SummaryCalendarView$renderGrids($p0) {
this.renderGrids_Old($p0);
onCalendarGridsRendered($p0);
};
}
function onCalendarGridsRendered($p0) {
console.log($p0);
var DivRenderingInfos = [];
$p0.forEach(v => { DivRenderingInfos = DivRenderingInfos.concat(v.$5W_0) });
console.log(DivRenderingInfos);
var items = [];
var clientContext = new SP.ClientContext();
//get calendar list
var calendarList = clientContext.get_web().get_lists().getByTitle(_spPageContextInfo.listTitle);
for (var i = 0; i < DivRenderingInfos.length; i++) {
var eventId = DivRenderingInfos[i].$d_0.$12_0;
var calendarListItem = calendarList.getItemById(eventId);
clientContext.load(calendarListItem);
items.push(calendarListItem);
}
//execute query
clientContext.executeQueryAsync(Function.createDelegate(this, function () {
for (var i = 0; i < DivRenderingInfos.length; i++) {
//get icon
var Category = items[i].get_item('Category')
if (Category == "Meeting") {
$(`div.ms-acal-item[_index='${DivRenderingInfos[i].$2C_0}']`).css('background-color', 'blue');
}
if (Category == "Work hours") {
$(`div.ms-acal-item[_index='${DivRenderingInfos[i].$2C_0}']`).css('background-color', 'yellow');
}
}
}), Function.createDelegate(this, function (e) {
//call original onItemsSucceed
console.log(e);
}));
}
Test result:
More References:
https://social.msdn.microsoft.com/Forums/office/en-US/6ead033b-4f9c-48a6-9a6d-a395fdb424b9/share-point-2010-calendar?forum=sharepointdevelopmentprevious
https://www.codeproject.com/Tips/759006/Enhancing-SharePoint-Calendar-sp-ui-applicationpag
https://blog.lekman.com/2016/03/overloading-functions-inside-sharepoint.html
BR

Else Statement Does Not Stop Looping NodeJS

I have been working on this code to read through a PDF file and grab the keywords of company names and display them. It all works fine except for one part where the else if statement outputs one line (which is what I want) but the else statement that comes last, which is supposed to output "Not Found" loops 20 times where I only want it to display the output only once instead of 20 times.
I have tried numerous ways by going through the internet to change my code, most recommended that forEach is not a proper way to do things and that I should use for instead but when I do, I just can't seem to get it right.
l.forEach(function(element) {
var j = element['fullTextAnnotation']['text'];
var sd = 'SDN. BHD.';
var bd = 'BHD.';
var et = 'Enterprise';
var inc = 'Incorporated';
var regtoken = new natural.RegexpTokenizer({pattern:/\n/});
var f = regtoken.tokenize(jsondata);
for(o = 0 ; o < f.length; o++){
var arrayline1 = natural.LevenshteinDistance(sd,f[o],{search:true});
var arrayline2 = natural.LevenshteinDistance(bd,f[o],{search:true});
var arrayline3 = natural.LevenshteinDistance(et,f[o],{search:true});
var arrayline4 = natural.LevenshteinDistance(inc,f[o],{search:true});
var arrayline5 = natural.LevenshteinDistance(nf,f[o],{search:false});
var onedata1 = arrayline1['substring'];
var onedata2 = arrayline2['substring'];
var onedata3 = arrayline3['substring'];
var onedata4 = arrayline4['substring'];
var onedata5 = arrayline5['substring'];
if (onedata1 === sd)
{
tokends = f[o];
break;
} else if(onedata3 === et)
{
tokends = f[o];
break;
} else if(onedata2 === bd)
{
tokends = f[o];
console.log(tokends);
break;
} else if(onedata4 === inc)
{
tokends = f[o];
console.log(tokends);
break;
} else{
console.log("Not Found");
return false;
}
}
});
I wish to get only one "Not Found" output for the else statement rather than it looping it for 20 times over. Hopefully I could get some insight to this problem. Thank you.
You are actually using the .forEach Array's method which actually take a function in parameter.
The keywork return breaks actually the loop of the current function executed.
For example :
const data = ['Toto', 'Tata', 'Titi'];
data.forEach(function(element) {
console.log(element);
if (element === 'Tata') {
return false;
}
});
// Will print everything :
// Print Toto
// Print Tata
// Print Titi
for (let element of data) {
console.log(element);
if (element === 'Tata') {
return false;
}
}
// Will print :
// Print Toto
// Print Tata

Simple console menu

I'm a beginner in node and I'm trying to build a simple console menu. I kept searching for this but coulnd't find a proper answer.
When I run the script I want to display a menu and ask the user to enter an option. After he chooses, I perform an action then display the menu again.
I tried using a while loop but it's blocking my program.
Here's an example of what I'm trying to achieve:
int userRes = -1;
while(userRes != 0){
console.log("Option 1")
console.log("Option 2")
console.log("Option 3")
userRes = readLineSync.question("Pick an option");
if(userRes == 1){
doSomething();
}else if (userRes == 2){
doSomethingElse();
}
}
EDIT: Actual code bellow. As you can see I use stomp. The while loop displays my menu and the action inside the if statement gets executed.
The problem is, when stomp sends back the response my code in the subscribe function is not being executed.
I tried without a while (just the action) and it works perfectly.
var Stomp = require("stomp-client");
const readlineSync = require("readline-sync");
var client = new Stomp(host, 61613);
function conn(res,req){
client.connect(function(sessionId) {
client.subscribe("/queue/" + res, function(body, headers) {
console.log(body);
});
var res = -1;
while (res != 0) {
displayMenu();
var res = readlineSync.question("Introduceti o optiune: ");
if (res == 1) {
client.publish("/queue/" + req, "test");
} else if (res == 0) {
process.exit();
}
}
});
}
function displayMenu() {
console.log(
"Option one\n Option two\n 0 for exit";
);
}
You can use this code
const readLineSync = require('readline-sync')
let userRes;
while (userRes !== '0') {
console.log("Option 1")
console.log("Option 2")
console.log("Option 3")
userRes = readLineSync.question("Pick an option");
if (userRes === '1') {
doSomething()
} else if (userRes === '2') {
doSomethingElse()
}
}

node js giving "RangeError: Maximum call stack size exceeded" on VPS machine

I am using Phantom JS to load a third party URL. Then there is an node+express server with "phantom" module, which is returning back the htmls from Phantom JS.
The code works perfect in my mac, but when I try to run it in VPS, node is giving
RangeError: Maximum call stack size exceeded
function scrape(url, func){
var phantom = require('phantom');
phantom.create('--load-images=no', function(ph){
return ph.createPage(function(page){
page.set('settings.loadImages', false) ;
return page.open(url, function(status){
//page.injectJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {
return page.evaluate((function(){
var scripts = document.getElementsByTagName('script'),
links = document.getElementsByTagName('link'),
images = document.getElementsByTagName('img'),
objects = document.getElementsByTagName('object');
for(i in objects){
if((obj = objects[i]) && obj.data){
if(obj.getAttribute('data') != obj.data){
obj.setAttribute('data', obj.data);
var params = obj.getElementsByTagName('param');
for(var j in params){
if((par = params[j]) && par.value){
console.log(par.name);
if(par.getAttribute('value') != par.value){
par.setAttribute('value', par.value);
}
if(par.name == "allowscriptaccess" ){
par.setAttribute('value', "always");
par.value = "always";
}
}
}
}
}
}
for(i in scripts){
if((script = scripts[i]) && script.src){
if(script.getAttribute('src') != script.src){
script.setAttribute('src', script.src);
}
}
}
for(i in links){
if((link = links[i]) && link.href ){
if(link.getAttribute('href') != link.href){
link.setAttribute('href', link.href);
}
}
}
for(i in images){
if((image = images[i]) && image.src){
if(image.getAttribute('src') != image.src){
image.setAttribute('src', image.src);
}
}
}
var baseTag = document.getElementsByTagName('base');
if(baseTag.length == 0){
var baseTag = '<base id="test" href="'+ document.domain +'" />';
var head = document.getElementsByTagName('head');
head[0].innerHTML = baseTag + head[0].innerHTML;
}
return document.getElementsByTagName('html')[0].outerHTML;
}), function(result){
ph.exit(); (func)(result);
});
//});
});
});
});
}
exports.scrape = scrape;

Opening tabs in Chrome news reader extension

I'm trying to create a simple chrome extension using the following google RSS reader sample,
http://code.google.com/chrome/extensions/samples.html#597015d3bcce3da693b02314afd607bec4f55291
I can add links in the pop-up window that open tabs, but not from the feeds themselves.
Looping through the items in the feed, grabbing title tags and link tags, I want the title to link the the appropriate sites
var entries = doc.getElementsByTagName('item');
var count = Math.min(entries.length, maxFeedItems);
for (var i = 0; i < count; i++) {
item = entries.item(i);
// Grab the title for the feed item.
var itemTitle = item.getElementsByTagName('title')[0];
if (itemTitle) {
itemTitle = itemTitle.textContent;
} else {
itemTitle = "Unknown title";
}
// Grab the link for this feed item
var itemLink = item.getElementsByTagName('link')[0];
if (itemLink) {
itemLink = itemLink.textContent;
} else {
itemLink = "Unknown link";
}
var title = document.createElement("a");
title.className = "item_title";
title.innerText = itemTitle; //display title in iframe
title.addEventListener("click", titleLink); // should open link when clicking on title, but does not.
}
// -------------------------------------------------------------------
// Show |url| in a new tab.
function showUrl(url) {
// Only allow http and https URLs.
if (url.indexOf("http:") != 0 && url.indexOf("https:") != 0) {
return;
}
chrome.tabs.create({url: url});
}
function moreStories(event) {
showUrl(moreStoriesUrl);
}
function titleLink(event) {
showUrl(itemLink);
}
Any thoughts on why this is not working.
If I replace title.addEventListener("click", titleLink); with title.addEventListener("click", moreStories); each title will link to moreStories, I cannot get each title to link to itemLink.
Thanks
Its a bit hard to answer your question without the whole code, but Ill give it a shot ;)
First up, titleLink() isnt going to work because itemLink isnt known. When you create title (the link) you should of attached it to that...say title.href=itemLink then in tiltleLinks you could access that href with showUrl(event.currentTarget.href)
Also did you fix the error in that example?...if not then change frameLoaded to....
function frameLoaded() {
var links = document.getElementsByTagName("A");
for (i = 0; i < links.length; i++) {
var clssName = links[i].className;
if (clssName != "item_title" && clssName != "open_box") {
links[i].addEventListener("click", showStory);
}
}
window.addEventListener("message", messageHandler);
}
If you still have probs could you attach the whole code so I can see what your doing and Ill give you a hand.
Thank you very much for your help.
code title.href=itemLink and code showUrl(event.currentTarget.href) was exactly what I needed.
For completeness, here is the full code,
<script id="iframe_script">
function reportHeight() {
var msg = JSON.stringify({type:"size", size:document.body.offsetHeight});
parent.postMessage(msg, "*");
}
function frameLoaded() {
var links = document.getElementsByTagName("A");
for (i = 0; i < links.length; i++) {
var class = links[i].className;
if (class != "item_title" && class != "open_box") {
links[i].addEventListener("click", showStory);
}
}
window.addEventListener("message", messageHandler);
}
function showStory(event) {
var href = event.currentTarget.href;
parent.postMessage(JSON.stringify({type:"show", url:href}), "*");
event.preventDefault();
}
function messageHandler(event) {
reportHeight();
}
</script>
<script>
// Feed URL.
var feedUrl = 'http://localhost/newsfeed.xml';
// The XMLHttpRequest object that tries to load and parse the feed.
var req;
function main() {
req = new XMLHttpRequest();
req.onload = handleResponse;
req.onerror = handleError;
req.open("GET", feedUrl, true);
req.send(null);
}
// Handles feed parsing errors.
function handleFeedParsingFailed(error) {
var feed = document.getElementById("feed");
feed.className = "error";
feed.innerText = "Error: " + error;
}
// Handles errors during the XMLHttpRequest.
function handleError() {
handleFeedParsingFailed('Failed to fetch RSS feed.');
}
// Handles parsing the feed data we got back from XMLHttpRequest.
function handleResponse() {
var doc = req.responseXML;
if (!doc) {
handleFeedParsingFailed("Not a valid feed.");
return;
}
buildPreview(doc);
}
// The maximum number of feed items to show in the preview.
var maxFeedItems = 10;
// Where the more stories link should navigate to.
var moreStoriesUrl;
function buildPreview(doc) {
// Get the link to the feed source.
var link = doc.getElementsByTagName("link");
var parentTag = link[0].parentNode.tagName;
if (parentTag != "item" && parentTag != "entry") {
moreStoriesUrl = link[0].textContent;
}
// Setup the title image.
var images = doc.getElementsByTagName("image");
var titleImg;
if (images.length != 0) {
var urls = images[0].getElementsByTagName("url");
if (urls.length != 0) {
titleImg = urls[0].textContent;
}
}
var img = document.getElementById("title");
// Listen for mouse and key events
if (titleImg) {
img.src = titleImg;
if (moreStoriesUrl) {
document.getElementById("title_a").addEventListener("click",moreStories);
document.getElementById("title_a").addEventListener("keydown",
function(event) {
if (event.keyCode == 13) {
moreStories(event);
}});
}
} else {
img.style.display = "none";
}
// Construct the iframe's HTML.
var iframe_src = "<!doctype html><html><head><script>" +
document.getElementById("iframe_script").textContent + "<" +
"/script></head><body onload='frameLoaded();' " +
"style='padding:0px;margin:0px;'>";
var feed = document.getElementById("feed");
// Set ARIA role indicating the feed element has a tree structure
feed.setAttribute("role", "tree");
var entries = doc.getElementsByTagName('item');
var count = Math.min(entries.length, maxFeedItems);
for (var i = 0; i < count; i++) {
item = entries.item(i);
// Grab the title for the feed item.
var itemTitle = item.getElementsByTagName('title')[0];
if (itemTitle) {
itemTitle = itemTitle.textContent;
} else {
itemTitle = "Unknown title";
}
// Grab the link for the feed item.
var itemLink = item.getElementsByTagName('link')[0];
if (itemLink) {
itemLink = itemLink.textContent;
} else {
itemLink = "Unknown link";
}
var item = document.createElement("div");
var title = document.createElement("a");
title.innerText = itemTitle; //display title in iframe
title.href=itemLink;
title.addEventListener("click", titleLink);
item.appendChild(title);
feed.appendChild(item);
}
if (moreStoriesUrl) {
var more = document.createElement("a");
more.className = "more";
more.innerText = "***Site Main Page*** \u00BB";
more.tabIndex = 0;
more.addEventListener("click", moreStories);
more.addEventListener("keydown", function(event) {
if (event.keyCode == 13) {
moreStories(event);
}});
feed.appendChild(more);
}
}
// -------------------------------------------------------------------
// Show |url| in a new tab.
function showUrl(url) {
// Only allow http and https URLs.
if (url.indexOf("http:") != 0 && url.indexOf("https:") != 0) {
return;
}
chrome.tabs.create({url: url});
}
// -------------------------------------------------------------------
function moreStories(event) {
showUrl(moreStoriesUrl);
}
function titleLink(event) {
showUrl(event.currentTarget.href);
}
function keyHandlerShowDesc(event) {
// Display content under heading when spacebar or right-arrow pressed
// Hide content when spacebar pressed again or left-arrow pressed
// Move to next heading when down-arrow pressed
// Move to previous heading when up-arrow pressed
if (event.keyCode == 32) {
showDesc(event);
} else if ((this.parentNode.className == "item opened") &&
(event.keyCode == 37)) {
showDesc(event);
} else if ((this.parentNode.className == "item") && (event.keyCode == 39)) {
showDesc(event);
} else if (event.keyCode == 40) {
if (this.parentNode.nextSibling) {
this.parentNode.nextSibling.children[1].focus();
}
} else if (event.keyCode == 38) {
if (this.parentNode.previousSibling) {
this.parentNode.previousSibling.children[1].focus();
}
}
}
function showDesc(event) {
var item = event.currentTarget.parentNode;
var items = document.getElementsByClassName("item");
for (var i = 0; i < items.length; i++) {
var iframe = items[i].getElementsByClassName("item_desc")[0];
if (items[i] == item && items[i].className == "item") {
items[i].className = "item opened";
iframe.contentWindow.postMessage("reportHeight", "*");
// Set the ARIA state indicating the tree item is currently expanded.
items[i].getElementsByClassName("item_title")[0].
setAttribute("aria-expanded", "true");
iframe.tabIndex = 0;
} else {
items[i].className = "item";
iframe.style.height = "0px";
// Set the ARIA state indicating the tree item is currently collapsed.
items[i].getElementsByClassName("item_title")[0].
setAttribute("aria-expanded", "false");
iframe.tabIndex = -1;
}
}
}
function iframeMessageHandler(e) {
// Only listen to messages from one of our own iframes.
var iframes = document.getElementsByTagName("IFRAME");
for (var i = 0; i < iframes.length; i++) {
if (iframes[i].contentWindow == e.source) {
var msg = JSON.parse(e.data);
if (msg) {
if (msg.type == "size") {
iframes[i].style.height = msg.size + "px";
}
else if (msg.type == "show") {
var url = msg.url;
if (url.indexOf("http://localhost/index.html") == 0) {
// If the URL is a redirect URL, strip of the destination and go to
// that directly. This is necessary because the Google news
// redirector blocks use of the redirects in this case.
var index = url.indexOf("&url=");
if (index >= 0) {
url = url.substring(index + 5);
index = url.indexOf("&");
if (index >= 0)
url = url.substring(0, index);
}
}
showUrl(url);
}
}
return;
}
}
}
window.addEventListener("message", iframeMessageHandler);
</script>
Thanks again for the help.
-Mike

Resources