Long story short, Speech Synthesis volume, rate, and pitch don't work. Is there anyone else having this issue and know how to resolve it, or am I alone?
Long story longer:
For me, Speech Synthesis volume, rate, and pitch don't work. Here is my speech function:
function speak(message, voice, callback, volume, rate, pitch, start, lang) {
if (speech) {
window.speechSynthesis.onvoiceschanged = function() {
voices = window.speechSynthesis.getVoices();
var msg = new SpeechSynthesisUtterance();
msg.voice = (typeof voice != "undefined" && voice != 0) ? voices[voice] : voices[0]; // Note: some voices don't support altering params
msg.volume = (typeof volume != "undefined" && volume != 0) ? volume : 1; // 0 to 1
msg.rate = (typeof rate != "undefined" && rate != 0) ? rate : 1; // 0.1 to 10
msg.pitch = (typeof pitch != "undefined" && pitch != 0) ? pitch : 2; //0 to 2
msg.text = message;
msg.lang = (typeof lang != "undefined" && lang != 0) ? lang : "en-US";
msg.onstart = function(event) {
if (typeof start != "undefined" && start != 0) {
start(event);
}
}
msg.onend = function(event) {
console.log(event.elapsedTime);
if (typeof callback != "undefined" && callback != 0) {
callback(event);
}
};
speechSynthesis.speak(msg);
};
}
}
However, when I call speak("Hello", 0, 0, 0.1) it outputs the exact same thing as speak("Hello"). I want to make it output the same thing but softer.
I am currently following http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API .
This is more of a comment but it could be a typo.
It looks like Speech Synthesis class has a rate property as well.
Be sure to set it on the utterance and not the speech synthesis object.
Incorrect:
speechSynthesis.rate = 2;
speechSynthesis.speak(utterance);
Correct:
utterance.rate = 2;
speechSynthesis.speak(utterance);
For some reason, the parameters will work if you change the language to en-EN.
From what I am seeing, setting these parameters only has an effect when the voice is from a local service.
As you noted, this is probably a case of not all voices supporting the ability to set parameters.
I am trying to do the same thing too. But i managed to make it work by adding a fullstop where I want it to slow down. I know this is not the right way to do it but it is kind of working for me
var u = new SpeechSynthesisUtterance();
u.text = 'Welcome to Handy Mandy. Lets Get Started. Say Handy Mandy.';
//u.lang = 'en-US';
//u.rate = 10;
//u.onend = function(event) { alert('Finished in ' + event.elapsedTime + ' seconds.'); }
speechSynthesis.speak(u);
Before this it
Related
I'm using AngularJS ver. 1.2.15 on my project. And, I have a select element on one of my views as per below:
<select class="select-white form-control form-select" id="cat2_{{feed.id}}" ng-model="feed.operationstatusid" ng-change="updateCategoryAndStatus(feed, true)"></select>
And, I'm feeding this element like this:
function SetCategory2(cat1Id, feed) {
var feedId = feed.id;
var fromRuleOpStatusId = -1;
$('#cat2_' + feedId).find('option').remove();
if (cat1Id > -1) {
$('#cat2_' + feedId).append($('<option></option>').text(lang.SelectSubCategory).val(0));
$.each($scope.category2, function (index, cat2Item) {
$('#cat2_' + feedId).append($('<option></option>').text(cat2Item.statusdescription).val(cat2Item.id));
});
var isselected = false;
$.each($scope.category2, function (index, cat2Item) {
if (feed.operationstatusid == cat2Item.id) {
$('#cat2_' + feedId).val(cat2Item.id);
fromRuleOpStatusId = -1;
isselected = true;
}
else {
var feedStr = "";
if (feed.title != undefined && feed.title != null) {
feedStr = feed.title.toLowerCase();
}
if ($scope.catTitleRulesTwo) {
$.each($scope.catTitleRulesTwo, function (r_index, r_item) {
if (cat2Item.id == r_item.titleCode && !isselected) {
if (feedStr != undefined && feedStr != null && r_item != undefined && r_item != null) {
String.prototype.contains = function (str) { return this.toLowerCase().indexOf(str) !== -1; };
var text = feedStr;
if (eval(r_item.ruleexpression)) {
$('#cat2_' + feedId).val(cat2Item.id);
fromRuleOpStatusId = cat2Item.id;
isselected = true;
}
}
}
});
}
}
});
if (fromRuleOpStatusId != -1) {
feed.operationstatusid = fromRuleOpStatusId;
}
}
else {
$('#cat2_' + feedId).append($('<option></option>').text(lang.SelectSubCategory).val(0));
}
}
I am aware of the facts about eval function, but the project I'm working on is quite old, so does the code. Anyway, this is about business logic and quite irrelevant with the thing I'm going to ask (or so I was thinking).
As you can see I'm appending all the options before I set the value of the selectbox with using .val(...). I have also checked that values do match along with the data types. But, when I observe this function step by step, I saw that selected value does show up without flaw. After the code finish with my above mentioned function (SetCategory2), code goes through on of the function located on AngularJS file, named xhr.onreadystatechange. It's not a long function, so I'm sharing it also on below.
xhr.onreadystatechange = function() {
if (xhr && xhr.readyState == 4) {
var responseHeaders = null,
response = null;
if(status !== ABORTED) {
responseHeaders = xhr.getAllResponseHeaders();
response = ('response' in xhr) ? xhr.response : xhr.responseText;
}
completeRequest(callback,
status || xhr.status,
response,
responseHeaders);
}
};
After the code released from this function, respective selectbox's value is pointed at the empty option.
I have run into topics which talks about this behaviour might due to invalid option-value match, but as I described above, I append all my options before deciding the value. So, I can't figure out what I'm missing.
Thank you in advance.
Please see the code herein under:
function binanceOrderBook() {
try {
muteHttpExceptions = true;
var workSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var mySheet = workSpreadsheet.getSheetByName('Order Books');
if(mySheet == 'Sheet'){
mySheet.activate();
} else {
mySheet = workSpreadsheet.insertSheet('Order Books', 1).activate();
}
var ui = SpreadsheetApp.getUi();
var string = 'https://api.binance.com/api/v3/depth?';
var symbolResponse = ui.prompt('Pair Name', 'Please enter the pair symbol.\n\nExamples: BTCUSDT or ETHBTC:', ui.ButtonSet.OK_CANCEL);
var symbolButton = symbolResponse.getSelectedButton();
if(symbolButton == ui.Button.CANCEL){return}
var mySymbol = symbolResponse.getResponseText();
mySymbol = mySymbol.toUpperCase();
string = string + "symbol=" + mySymbol;
var limitResponse = ui.prompt('Limit:', 'Please enter Limit (Period Quantity).\nValid limits are:5, 10, 20, 50, 100, 500, 1000. \n Default limit is 100.\n You can leave it blank and simply click OK.', ui.ButtonSet.OK_CANCEL);
if(limitResponse.getSelectedButton() == ui.Button.CANCEL){return}
var myLimit = Number(limitResponse.getResponseText());
if(myLimit != 5 && myLimit != 10 && myLimit != 20 && myLimit != 50 && myLimit != 100 && myLimit != 500 && myLimit != 1000){myLimit = 100;}
string = string + "&limit=" + myLimit;
var myDate = new Date().toUTCString();
var jsonOrderBookData = JSON.parse(UrlFetchApp.fetch('https://api.binance.com/api/v3/depth?symbol=' + mySymbol + '&limit=' + myLimit));
reporter(jsonOrderBookData);
} catch (e){
exceptionHandler(e)
}
}
The problem I have is to run UrlFetchApp.fetch again when it encounters an error. I need to run it several times to get the result. So, I need to prevent the script from stopping when an error (code -1003) occurs, but how can I do that?
EDIT: There is a function windows.onerror in javascript which can be set to prevent the program from stopping. Is it useable in GAS? if yes, how? if No, is there a similar solution for GAS?
You could call binanceOrderBook() from within your catch statement. E.g.
...
} catch (e){
binanceOrderBook()
exceptionHandler(e)
}
Of course you probably should have some condition that exits the function if a certain error occurs, or if you know that the function needs to run no more than x number of times you could check that it has run less than x times before executing. For example,
const maxValue = 10 // whatever the max number of executions should be
function binanceOrderBook(executions) {
if (executions >= maxValue) return;
try {
...
} catch(e) {
binanceOrderBook((executions || 0) + 1));
exceptionHandler(e); // note that I am including this here because it's in your original example, but as it is written now, exception handler won't be called until binanceOrderBook executes without an error.
}
}
[Edit] To answer your second question, there is no equivalent to window.onerror that I know of in GAS. However, window.onerror is a global event handler and so would affect errors thrown by any functions defined in your project. To address a concern with a single function call like this, you are better off using a try catch statement as you have.
Why does HTML5 validation fail when having duplicate element IDs but on different <template>. I'm planning to use only one template at a time so the actual DOM ID won't be duplicated.
something like:
<template id="companyAccount">
<li><label>Company: <input type="text" id="account_name"></label></li>
<li><label>Street: <input id="account_street" ...
...
</template>
<template id="residentialAccount">
<li><label>Name: <input type="text" id="account_name"></label></li>
<li><label>Street: <input id="account_street" ...
...
</template>
<script>
...
let template = $(isResidential ? '#residentialAccount' : '#companyAccount').get(0).content;
$('#account_info').empty().append(template.cloneNode(true));
</script>
As TJBlackman mentioned each value for id attributes must be unique. However when working with code it's up to you to determine if the code being imported contains a duplicate id. Additionally I've pretty much stopped using validators for the most part as they aren't well maintained (and the W3C's CSS validator is atrocious) and the consoles, proper error handling and using the XML parser for HTML5 will tell you pretty much everything you need to know.
You have a couple of options. You can use data-account="residential" (don't make the mistake of using camelCasing as that will eventually put you in direct conflict with the standards bodies) and detect the attribute via document.querySelectorAll:
function $(o)
{
var a = true;
try {document.querySelectorAll(o);}
catch(err) {a = false; console.log('Error: "'+o+'" is not a valid CSS selector.'); sound.notice();}
return (a && document.querySelectorAll && document.querySelectorAll(o)) ? document.querySelectorAll(o) : false;
}
Usage: $('[data-account="residential"]')[0].length and $('[data-account="residential"]')[0].value.
Alternatively you can do what I do with my platform which has things tightly integrated though this is the function I use that you might decide to slim down for your specific purposes. You can use document.createTreeWalker and literally go through every single element to scan for walker.currentNode.hasAttribute('id') to test against document.getElementById. This code is used before importing XML in to the DOM on my platform:
/******** part of larger ajax() function ********/
if (xhr.readyState == 4 && xhr.status != 204)
{}
//This code occurs within the above condition.
var r = jax_id_duplication_prevention(xhr.responseXML,param_id_container_pos,id_container);
if (r)
{
if (param_id_container_pos=='after') {id_container.parentNode.insertBefore(xml.getElementsByTagName('*')[0],id_container.nextSibling);}
else if (param_id_container_pos=='before') {id_container.parentNode.insertBefore(document.importNode(xml.getElementsByTagName('*')[0],true),id_container);}
else if (param_id_container_pos=='first')
{
if (id_container.childNodes.length > 0) {id_container.insertBefore(document.importNode(xml.getElementsByTagName('*')[0],true),id_container.firstChild);}
else {id_container.appendChild(document.importNode(xml.getElementsByTagName('*')[0],true));}
}
else if (param_id_container_pos=='inside') {id_container.appendChild(document.importNode(xml.getElementsByTagName('*')[0],true));}
else if (param_id_container_pos=='replace') {id_container.parentNode.replaceChild(document.importNode(xml.getElementsByTagName('*')[0],true),id_container);}
else if (param_id_container_pos=='fragment')
{
if (option.fragment) {delete option.fragment;}
option.fragment = document.importNode(new DOMParser().parseFromString(xhr.responseText,'application/xml').childNodes[0],true);
if (id_container && typeof id_container == 'function') {id_container();}
}
else {alert('Error: unknown position to import data to: '+id_container_pos);}
}
/******** part of larger ajax() function ********/
function ajax_id_duplication_prevention(xml,param_id_container_pos,id_container)
{
var re = true;
if (typeof id_container == 'string' && id_container.length > 0 && id_(id_container)) {id_container = id_(id_container);}
if (typeof option.id_fade == 'string' && option.id_fade.length > 0 && id_(option.id_fade)) {element_del(option.id_fade); option.id_fade = '';}
if (typeof xml.firstChild.hasAttribute == 'function')
{
if (xml.firstChild.hasAttribute('id') && xml.firstChild.getAttribute('id').length > 0 && id_(xml.firstChild.getAttribute('id')) && id_(xml.firstChild.id).parentNode.id=='liquid') {change(xml.firstChild.id,'fade');}
if (xml.firstChild.hasAttribute('id') && xml.firstChild.getAttribute('id').length > 0 && id_(xml.firstChild.id) && !id_(xml.firstChild.id).parentNode.id=='liquid') {re = false;}
else if (typeof document.createTreeWalker=='function')
{
var idz = [];
try
{
var walker = document.createTreeWalker(xml,NodeFilter.SHOW_ELEMENT,null,false);
while (walker.nextNode())
{
if (walker.currentNode.hasAttribute('id') && walker.currentNode.getAttribute('id').length > 0)
{
if (walker.currentNode.id==undefined && walker.currentNode.nodeName.toLowerCase()=='parsererror') {console.log('Error: a parser error was detected.');}
else if (walker.currentNode.id==undefined) {alert('walker.currentNode.nodeName = '+walker.currentNode.nodeName+'\n\n'+document.serializeToString(xml));}
else
{
for (var i = 0; i<id_('liquid').childNodes.length; i++)
{
if (id_('liquid').childNodes[i].nodeType==1 && id_(walker.currentNode.id) && is_node_parent(walker.currentNode.id,id_('liquid').childNodes[i]) && (param_id_container_pos!='replace' || walker.currentNode.id!=id_container.id))
{
if (param_id_container_pos != 'replace' && id_container != walker.currentNode.id) {element_del(id_('liquid').childNodes[i]);}//If changing operator test: ajax('get','?ajax=1&web3_url=/'+url_section()+'/'+url_page(),'replace',push_current_id());
}
}
var n = id_(walker.currentNode.id);
if (in_array(walker.currentNode.id,idz))
{
var fd = new FormData();
fd.append('ajax','error_xml');
fd.append('post_error','Duplicate id <code>'+walker.currentNode.id+'</code>.');
fd.append('post_url',url_window().split(url_base())[1].split('?')[0]);
fd.append('post_xml',new XMLSerializer().serializeToString(xml));
if (fd) {ajax('post',path+'/themes/',fd);}
modal.alert('Error: can not import XML, the id \''+walker.currentNode.id+'\' was detected twice in the layer being imported. Duplicated ID\'s break expected functionality and are illegal. While the XML content was not imported it is still possible that the related request was successful. It is possible to override this problem by simply doing a full request (press the Go button in your browser\'s graphic user interface) however if the id is referenced programmatically the website may exhibit unusual behavior.');
break;
setTimeout(function()
{
history.back();
push_reload();
console.log('Developer: duplicate id '+walker.currentNode.id+' was encounterted.');
if (status >= 9) {modal.xml('Duplicate ID Error', '%3Cp%3EError%3A%20the%20id%20%3Ccode%3E'+walker.currentNode.id+'%3C%2Fcode%3E%20occurred%20twice%20and%20therefore%20the%20page%20can%20not%20be%20viewed.%3C%2Fp%3E%3Cp%3EFor%20debugging%20and%20fixing%20purposes%20you%20should%20consider%20opening%20the%20URL%20in%20a%20new%20tab.%3C%2Fp%3E%3Cdiv%20class%3D%22center%20margin%22%3E%3Cinput%20onclick%3D%22modal.close()%3B%22%20tabindex%3D%223%22%20type%3D%22button%22%20value%3D%22Close%22%20%2F%3E%3C%2Fdiv%3E');}
else {modal.xml('Duplicate ID Error', '%3Cp%3EError%3A%20the%20id%20%3Ccode%3E'+walker.currentNode.id+'%3C%2Fcode%3E%20occurred%20twice%20and%20therefore%20the%20page%20can%20not%20be%20viewed.%3C%2Fp%3E%3Cdiv%20class%3D%22center%20margin%22%3E%3Cinput%20onclick%3D%22modal.close()%3B%22%20tabindex%3D%223%22%20type%3D%22button%22%20value%3D%22Close%22%20%2F%3E%3C%2Fdiv%3E');}
re = false;
},4000);
}
else {idz.push(walker.currentNode.id);}
}
if (id_(walker.currentNode.id) && (param_id_container_pos!='replace' && walker.currentNode.id!=id_container.id && !is_node_parent(walker.currentNode.id,id_container)))
{//ajax replace (carousel loader) complications if changed.
re = false;
modal.alert('Error: unable to import page, the id \''+walker.currentNode.id+'\' already exists in the DOM.');
break;
}
}
}
}
catch (err) {}//IE9
}
}
return re;
}
Regardless of how you approach addressing the issue it is not one addressed by the standards bodies and must be explicitly handled by developers. Failure to handle duplicate id attribute/values will result in the wrong element being chosen at some point which may quietly accrue compromised/malformed data over time that no one might notice for years and thus could easily hinder if not outright destroy any business relations effected by it. Good luck!
I didn't find support for connecting one edge to another, thus right now I added a T-piece as a vertex for branching one edge into two edges:
Now I'd like to be able to drag and drop the terminal of one edge onto another edge which should then create and connect a T-piece automatically. As a first step I thought about editing (or rather expanding) getPreviewTerminalState in mxEdgeHandler in order to highlight the target edge when a terminal point is dragged over it. However this feels quiet hacky since I naturally don't want to interfere with a function deep down in the library itself.
Is this the right starting point anyways? I just need a bit of guidance there. Thanks!
Alright by now I've found a solution I can live with and which makes the T-piece obsolete. If someone stumbles upon this issue too, the solution I have looks something like this:
// set edges as valid targets
var graphIsValidTarget = mxGraph.prototype.isValidTarget;
Graph.prototype.isValidTarget = function(cell) {
return (cell && cell.edge) || graphIsValidTarget.apply(this, arguments);
};
// mark edge if another edge's terminal point is dragged over it
var edgeHandlerGetPreviewTerminalState = mxEdgeHandler.prototype.getPreviewTerminalState;
mxEdgeHandler.prototype.getPreviewTerminalState = function(me) {
let ret = edgeHandlerGetPreviewTerminalState.apply(this, arguments);
let edge = me.getCell();
if (edge && edge.edge && this.graph.getSelectionCell() !== edge) {
let state = this.graph.view.getState(edge);
this.marker.setCurrentState(state, me, this.marker.validColor);
ret = state;
} else if (ret == null && this.marker && (!this.error || (this.error && this.error === ''))) {
this.marker.reset();
}
return ret;
};
// snap to edge's midpoint
var graphViewGetFloatingTerminalPoint = mxGraphView.prototype.getFloatingTerminalPoint;
mxGraphView.prototype.getFloatingTerminalPoint = function(edge, start, end, source) {
let res = null;
if (start.edge) {
res = this.graph.getEdgeMidPoint(start);
} else {
res = graphViewGetFloatingTerminalPoint.apply(this, arguments);
}
return res;
};
// returns midpoint of an edge
Graph.prototype.getEdgeMidPoint = function(edge) {
let ret = null;
if (edge && edge.edge) {
let points = this.view.getState(edge).absolutePoints;
let minX = points[0].x < points[1].x ? points[0].x : points[1].x;
let maxX = minX === points[0].x ? points[1].x : points[0].x;
let minY = points[0].y < points[1].y ? points[0].y : points[1].y;
let maxY = minY === points[0].y ? points[1].y : points[0].y;
ret = new mxPoint(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
}
return ret;
}
I am trying to build a seating reservation web app using SVG. Imagine, I've created rectangles in the svg, which represents an empty seat. I want to allow user to drop an html "image" element on the "rect" to reserve the seat.
However, I couldn't get the droppable to work on the SVG elemnets. Any one has any idea why this is so? Here is the code:
$('#target').svg();
var svg = $("#target").svg('get');
svg.rect(20, 10, 100, 50, 10, 10, { fill: '#666', class: "droppable" });
$('rect')
.droppable({
accept: '.product',
tolerance: 'touch',
drop: function (event, ui) {
alert('df');
}
}
I looked in to the jQuery-ui source and figured out why it wasn't working with SVGs. jQuery thinks they have a width and height of 0px, so the intersection test fails.
I wrapped $.ui.intersect and set the correct size information before passing the arguments through to the original function. There may be more proportion objects that need fixing but the two I did here are enough to fix my :
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function(draggable, droppable, toleranceMode) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
//Fix droppable
if (droppable.proportions && droppable.proportions.width === 0 && droppable.proportions.height === 0) {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = droppable.proportionsBBox;
}
return $.ui.intersect_o(draggable, droppable, toleranceMode);
};
With jQuery UI 1.11.4 I had to change Eddie's solution to the following, as draggable.proportions is now a function:
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
if (typeof $(droppable.element).get(0).getBBox === "function") {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = function () {
return droppable.proportionsBBox;
};
}
return $.ui.intersect_o(draggable, droppable, toleranceMode, event);
};
If you want to restrict the drop on svg elements to hit on visible content only (for example in polygons) you might want to use this addition to Peter Baumann's suggestion:
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
if (typeof $(droppable.element).get(0).getBBox === "function") {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = function () {
return droppable.proportionsBBox;
};
}
var intersect = $.ui.intersect_o(draggable, droppable, toleranceMode, event);
if (intersect) {
var dropTarget = $(droppable.element).get(0);
if (dropTarget.ownerSVGElement && (typeof (dropTarget.isPointInFill) === 'function') && (typeof (dropTarget.isPointInStroke) === 'function')) {
var x = ( draggable.positionAbs || draggable.position.absolute ).left + draggable.margins.left + draggable.helperProportions.width / 2,
y = ( draggable.positionAbs || draggable.position.absolute ).top + draggable.margins.top + draggable.helperProportions.height / 2,
p = dropTarget.ownerSVGElement.createSVGPoint();
p.x = x;
p.y = y;
p = p.matrixTransform(dropTarget.getScreenCTM().inverse());
if(!(dropTarget.isPointInFill(p) || dropTarget.isPointInStroke(p)))
intersect = false;
}
}
return intersect;
};
In case if anyone has the same question in mind, droppable doesn't work in jquery SVG. So in the end, I did the following to create my own droppable event:
In draggable, set the target currently dragged been dragged to draggedObj ,
In the mouse up event, check if the draggedObj is null, if it's not null, then drop the item according to the current position. ( let me know if you need help on detecting the current position)