Is there a way to make the built in HTML 5 spellcheck test fields on page load? I want to add this feature to an existing intranet site so that when the user loads a form the spelling errors are displayed.
It seems that the spelling errors are displayed when the user types an invalid value. I'm trying to show invalid values that were previously saved then served to the page.
Is this possible?
Thanks ST
...
<script>
var e;
function spell()
{
var sp = document.getElementById('sp');
var sel = window.getSelection();
sel.selectAllChildren(sp);
e = sel.getRangeAt(0);
select(sp, e.startOffset);
return true;
}
function select(sp, i)
{
var sel = window.getSelection();
if (i >= e.endOffset) return true;
var r = document.createRange();
r.setStart(sp, i);
r.setEnd(sp, i);
i++;
sel.removeAllRanges();
sel.addRange(r);
setTimeout(function() {select(sp, i)}, 20);
return true;
}
</script>
</head>
<body onload="spell();" >
<div id="sp" spellcheck="true" contenteditable="true">
...
This worked for me with Chrome. It's a bit ugly, you see the cursor moving in the editable div, but it does the job.
Following HTML shows empty array in console on first click:
<!DOCTYPE html>
<html>
<head>
<script>
function test(){
console.log(window.speechSynthesis.getVoices())
}
</script>
</head>
<body>
Test
</body>
</html>
In second click you will get the expected list.
If you add onload event to call this function (<body onload="test()">), then you can get correct result on first click. Note that the first call on onload still doesn't work properly. It returns empty on page load but works afterward.
Questions:
Since it might be a bug in beta version, I gave up on "Why" questions.
Now, the question is if you want to access window.speechSynthesis on page load:
What is the best hack for this issue?
How can you make sure it will load speechSynthesis, on page load?
Background and tests:
I was testing the new features in Web Speech API, then I got to this problem in my code:
<script type="text/javascript">
$(document).ready(function(){
// Browser support messages. (You might need Chrome 33.0 Beta)
if (!('speechSynthesis' in window)) {
alert("You don't have speechSynthesis");
}
var voices = window.speechSynthesis.getVoices();
console.log(voices) // []
$("#test").on('click', function(){
var voices = window.speechSynthesis.getVoices();
console.log(voices); // [SpeechSynthesisVoice, ...]
});
});
</script>
<a id="test" href="#">click here if 'ready()' didn't work</a>
My question was: why does window.speechSynthesis.getVoices() return empty array, after page is loaded and onready function is triggered? As you can see if you click on the link, same function returns an array of available voices of Chrome by onclick triger?
It seems Chrome loads window.speechSynthesis after the page load!
The problem is not in ready event. If I remove the line var voice=... from ready function, for first click it shows empty list in console. But the second click works fine.
It seems window.speechSynthesis needs more time to load after first call. You need to call it twice! But also, you need to wait and let it load before second call on window.speechSynthesis. For example, following code shows two empty arrays in console if you run it for first time:
// First speechSynthesis call
var voices = window.speechSynthesis.getVoices();
console.log(voices);
// Second speechSynthesis call
voices = window.speechSynthesis.getVoices();
console.log(voices);
According to Web Speech API Errata (E11 2013-10-17), the voice list is loaded async to the page. An onvoiceschanged event is fired when they are loaded.
voiceschanged: Fired when the contents of the SpeechSynthesisVoiceList, that the getVoices method will return, have changed. Examples include: server-side synthesis where the list is determined asynchronously, or when client-side voices are installed/uninstalled.
So, the trick is to set your voice from the callback for that event listener:
// wait on voices to be loaded before fetching list
window.speechSynthesis.onvoiceschanged = function() {
window.speechSynthesis.getVoices();
...
};
You can use a setInterval to wait until the voices are loaded before using them however you need and then clearing the setInterval:
var timer = setInterval(function() {
var voices = speechSynthesis.getVoices();
console.log(voices);
if (voices.length !== 0) {
var msg = new SpeechSynthesisUtterance(/*some string here*/);
msg.voice = voices[/*some number here to choose from array*/];
speechSynthesis.speak(msg);
clearInterval(timer);
}
}, 200);
$("#test").on('click', timer);
After studying the behavior on Google Chrome and Firefox, this is what can get all voices:
Since it involves something asynchronous, it might be best done with a promise:
const allVoicesObtained = new Promise(function(resolve, reject) {
let voices = window.speechSynthesis.getVoices();
if (voices.length !== 0) {
resolve(voices);
} else {
window.speechSynthesis.addEventListener("voiceschanged", function() {
voices = window.speechSynthesis.getVoices();
resolve(voices);
});
}
});
allVoicesObtained.then(voices => console.log("All voices:", voices));
Note:
When the event voiceschanged fires, we need to call .getVoices() again. The original array won't be populated with content.
On Google Chrome, we don't have to call getVoices() initially. We only need to listen on the event, and it will then happen. On Firefox, listening is not enough, you have to call getVoices() and then listen on the event voiceschanged, and set the array using getVoices() once you get notified.
Using a promise makes the code more clean. Everything related to getting voices are in this promise code. If you don't use a promise but instead put this code in your speech routine, it is quite messy.
You can write a voiceObtained promise to resolve to a voice you want, and then your function to say something can just do: voiceObtained.then(voice => { }) and inside that handler, call the window.speechSynthesis.speak() to speak something. Or you can even write a promise speechReady("hello world").then(speech => { window.speechSynthesis.speak(speech) }) to say something.
heres the answer
function synthVoice(text) {
const awaitVoices = new Promise(resolve=>
window.speechSynthesis.onvoiceschanged = resolve)
.then(()=> {
const synth = window.speechSynthesis;
var voices = synth.getVoices();
console.log(voices)
const utterance = new SpeechSynthesisUtterance();
utterance.voice = voices[3];
utterance.text = text;
synth.speak(utterance);
});
}
At first i used onvoiceschanged , but it kept firing even after the voices was loaded, so my goal was to avoid onvoiceschanged at all cost.
This is what i came up with. It seems to work so far, will update if it breaks.
loadVoicesWhenAvailable();
function loadVoicesWhenAvailable() {
voices = synth.getVoices();
if (voices.length !== 0) {
console.log("start loading voices");
LoadVoices();
}
else {
setTimeout(function () { loadVoicesWhenAvailable(); }, 10)
}
}
setInterval solution by Salman Oskooi was perfect
Please see https://jsfiddle.net/exrx8e1y/
function myFunction() {
dtlarea=document.getElementById("details");
//dtlarea.style.display="none";
dtltxt="";
var mytimer = setInterval(function() {
var voices = speechSynthesis.getVoices();
//console.log(voices);
if (voices.length !== 0) {
var msg = new SpeechSynthesisUtterance();
msg.rate = document.getElementById("rate").value; // 0.1 to 10
msg.pitch = document.getElementById("pitch").value; //0 to 2
msg.volume = document.getElementById("volume").value; // 0 to 1
msg.text = document.getElementById("sampletext").value;
msg.lang = document.getElementById("lang").value; //'hi-IN';
for(var i=0;i<voices.length;i++){
dtltxt+=voices[i].lang+' '+voices[i].name+'\n';
if(voices[i].lang==msg.lang) {
msg.voice = voices[i]; // Note: some voices don't support altering params
msg.voiceURI = voices[i].voiceURI;
// break;
}
}
msg.onend = function(e) {
console.log('Finished in ' + event.elapsedTime + ' seconds.');
dtlarea.value=dtltxt;
};
speechSynthesis.speak(msg);
clearInterval(mytimer);
}
}, 1000);
}
This works fine on Chrome for MAC, Linux(Ubuntu), Windows and Android
Android has non-standard en_GB wile others have en-GB as language code
Also you will see that same language(lang) has multiple names
On Mac Chrome you get en-GB Daniel besides en-GB Google UK English Female and n-GB Google UK English Male
en-GB Daniel (Mac and iOS)
en-GB Google UK English Female
en-GB Google UK English Male
en_GB English United Kingdom
hi-IN Google हिन्दी
hi-IN Lekha (Mac and iOS)
hi_IN Hindi India
Another way to ensure voices are loaded before you need them is to bind their loading state to a promise, and then dispatch your speech commands from a then:
const awaitVoices = new Promise(done => speechSynthesis.onvoiceschanged = done);
function listVoices() {
awaitVoices.then(()=> {
let voices = speechSynthesis.getVoices();
console.log(voices);
});
}
When you call listVoices, it will either wait for the voices to load first, or dispatch your operation on the next tick.
I used this code to load voices successfully:
<select id="voices"></select>
...
function loadVoices() {
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
}
function populateVoiceList() {
var allVoices = speechSynthesis.getVoices();
allVoices.forEach(function(voice, index) {
var option = $('<option>').val(index).html(voice.name).prop("selected", voice.default);
$('#voices').append(option);
});
if (allVoices.length > 0 && speechSynthesis.onvoiceschanged !== undefined) {
// unregister event listener (it is fired multiple times)
speechSynthesis.onvoiceschanged = null;
}
}
I found the 'onvoiceschanged' code from this article: https://hacks.mozilla.org/2016/01/firefox-and-the-web-speech-api/
Note: requires JQuery.
Works in Firefox/Safari and Chrome (and in Google Apps Script too - but only in the HTML).
async function speak(txt) {
await initVoices();
const u = new SpeechSynthesisUtterance(txt);
u.voice = speechSynthesis.getVoices()[3];
speechSynthesis.speak(u);
}
function initVoices() {
return new Promise(function (res, rej){
speechSynthesis.getVoices();
if (window.speechSynthesis.onvoiceschanged) {
res();
} else {
window.speechSynthesis.onvoiceschanged = () => res();
}
});
}
While the accepted answer works great but if you're using SPA and not loading full-page, on navigating between links, the voices will not be available.
This will run on a full-page load
window.speechSynthesis.onvoiceschanged
For SPA, it wouldn't run.
You can check if it's undefined, run it, or else, get it from the window object.
An example that works:
let voices = [];
if(window.speechSynthesis.onvoiceschanged == undefined){
window.speechSynthesis.onvoiceschanged = () => {
voices = window.speechSynthesis.getVoices();
}
}else{
voices = window.speechSynthesis.getVoices();
}
// console.log("voices", voices);
I had to do my own research for this to make sure I understood it properly, so just sharing (feel free to edit).
My goal is to:
Get a list of voices available on my device
Populate a select element with those voices (after a particular page loads)
Use easy to understand code
The basic functionality is demonstrated in MDN's official live demo of:
https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis
but I wanted to understand it better.
To break the topic down...
SpeechSynthesis
The SpeechSynthesis interface of the Web Speech API is the controller
interface for the speech service; this can be used to retrieve
information about the synthesis voices available on the device, start
and pause speech, and other commands besides.
Source
onvoiceschanged
The onvoiceschanged property of the SpeechSynthesis interface
represents an event handler that will run when the list of
SpeechSynthesisVoice objects that would be returned by the
SpeechSynthesis.getVoices() method has changed (when the voiceschanged
event fires.)
Source
Example A
If my application merely has:
var synth = window.speechSynthesis;
console.log(synth);
console.log(synth.onvoiceschanged);
Chrome developer tools console will show:
Example B
If I change the code to:
var synth = window.speechSynthesis;
console.log("BEFORE");
console.log(synth);
console.log(synth.onvoiceschanged);
console.log("AFTER");
var voices = synth.getVoices();
console.log(voices);
console.log(synth);
console.log(synth.onvoiceschanged);
The before and after states are the same, and voices is an empty array.
Solution
Although i'm not confident implementing Promises, the following worked for me:
Defining the function
var synth = window.speechSynthesis;
// declare so that values are accessible globally
var voices = [];
function set_up_speech() {
return new Promise(function(resolve, reject) {
// get the voices
var voices = synth.getVoices();
// get reference to select element
var $select_topic_speaking_voice = $("#select_topic_speaking_voice");
// for each voice, generate select option html and append to select
for (var i = 0; i < voices.length; i++) {
var option = $("<option></option>");
var suffix = "";
// if it is the default voice, add suffix text
if (voices[i].default) {
suffix = " -- DEFAULT";
}
// create the option text
var option_text = voices[i].name + " (" + voices[i].lang + suffix + ")";
// add the option text
option.text(option_text);
// add option attributes
option.attr("data-lang", voices[i].lang);
option.attr("data-name", voices[i].name);
// append option to select element
$select_topic_speaking_voice.append(option);
}
// resolve the voices value
resolve(voices)
});
}
Calling the function
// in your handler, populate the select element
if (page_title === "something") {
set_up_speech()
}
Android Chrome - turn off data saver. It was helpfull for me.(Chrome 71.0.3578.99)
// wait until the voices load
window.speechSynthesis.onvoiceschanged = function() {
window.speechSynthesis.getVoices();
};
let voices = speechSynthesis.getVoices();
let gotVoices = false;
if (voices.length) {
resolve(voices, message);
} else {
speechSynthesis.onvoiceschanged = () => {
if (!gotVoices) {
voices = speechSynthesis.getVoices();
gotVoices = true;
if (voices.length) resolve(voices, message);
}
};
}
function resolve(voices, message) {
var synth = window.speechSynthesis;
let utter = new SpeechSynthesisUtterance();
utter.lang = 'en-US';
utter.voice = voices[65];
utter.text = message;
utter.volume = 100.0;
synth.speak(utter);
}
Works for Edge, Chrome and Safari - doesn't repeat the sentences.
I'm trying to create a progress bar in Google app scripting , which when some one click a button (Go) it will be automatically, slowly go to start to end . Something you see in Firefox download window.
this is my code.
function doGet(e) {
var app = UiApp.createApplication();
var progressPanel = app.loadComponent("progressbar_auto");
var gobutton =app.getElementById("go_btn");
var go_btn_handler =app.createServerHandler("updateProgressbar");
go_btn_handler.addCallbackElement(gobutton);
gobutton.addClickHandler(go_btn_handler)
app.add(progressPanel);
return app;
}
//function time(i){
// Utilities.sleep(5);
// }
function updateProgressbar(){
var app = UiApp.getActiveApplication()
for(var i =1 ; i < 250 ; i++ ){
app.getElementById("progress").setWidth(i + 'px');
time();
}
Logger.log(i);
return app;
}
But according to this code for loop will execute very speedy & ,progress bar completed very quick . Is there any way to slow this.
You can find the my application here.
https://sites.google.com/a/macros/dewdynamics.net/exec?service=AKfycbztKB_ljMBGi_55RrK_DH3x_pRZQ993bDoAHSsxDA
Is there any way to add a slide bar , to control the progress bar. Something we can do in php or HTML 5.
Thanks
Why don't you use HtmlServices for this. Just try it:
Click Here
You can use jquery to implement this.
Updated answer: to get the status of scripts running server side, you need to store progress to the cache. Then the client side can call a server-side function to retrieve it. https://developers.google.com/apps-script/reference/cache/cache-service
No, there isn't a real way to do a progress bar on Apps Script.
There's some workarounds though. You can add multiple handlers to the same button, and in each one, with a different sleep time, you can update the GUI many times. Or, as most do, show an endless progress gif animation in a client handler (for instant feedback) and after your second handler finishes, a ServerHandler where you actually do the work, you hide the image and return the results.
I worked out a solution by storing data in the cache on the server side and reading the cache on the client side as suggested by Greg.
Screenshot
Video
Caching progress data server side
var cache = CacheService.getScriptCache();
async function updateCacheProgress(current, total, student) {
// cache for 10 seconds
cache.put("total", total, 10);
cache.put("current", current, 10);
cache.put("student", student, 10);
}
Script on client side
window.addEventListener('load', getUpdatedProcess);
function updateProgress(data) {
console.log('#student: ' + data.student)
console.log('#current: ' + data.current)
console.log('#total: ' + data.total)
var ProgressBar = document.getElementById('progressBar');
var Progress = document.getElementById('progress');
var ProgressStatus = document.getElementById('progressStatus');
var percent = 0.1
percent = data.current / data.total *100;
percent = percent.toFixed(1);
Progress.style.width = percent + '%';
Progress.innerText = percent + '%';
ProgressStatus.innerHTML = data.student + ` (${data.current} of ${data.total})`
if(percent < 100) getUpdatedProcess()
}
function getUpdatedProcess() {
google.script.run.withSuccessHandler(updateProgress).getProgress();
}
Apps Script that retrieves stored cache executed via client
function getProgress() {
var total = cache.get("total");
var current = cache.get("current");
var student = cache.get("student");
return {total: total, current: current, student: student}
}
Client HTML
<html>
<head>
<base target="_top">
<style>
* {
font-family: 'Arial';
}
#progressBar {
width: 100%;
background-color: silver;
}
#progress {
width: 0%;
height: 30px;
line-height: 32px;
text-align: center;
color: white;
background-color: green;
}
#progressStatus {
}
</style>
</head>
<body>
<div id="progressBar">
<div id="progress"></div>
</div>
<br><br>
<div id="progressStatus"><?= student ?> (<?= progress ?>)</div>
</body>
</html>
First of All i'm a beginner in jquery and ajax,
what i'm trying to do is view a sample from a whole json file in the link
http://soap.madarat.jo/Services/BusinessApplication1-DomainService1.svc/json/gettasks
and what is the possibility of editing the sample,
<!DOCTYPE HTML>
<html>
<head>
<title>json test</title>
<script src="js/json2.js" type="text/javascript"></script>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="jtip.js" type="text/javascript"></script>
<script type="text/javascript">
function query() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://soap.madarat.jo/Services/BusinessApplication1- DomainService1.svc/json/gettasks", false);
xmlhttp.send();
var results = JSON.parse(xmlhttp.responseText);
var html = '<ol>';
alert(results.GetTasksResult);
if (results.GetTasksResult != null) {
var title;
alert(results);
for (var i = 0; i < results.GetTasksResult.RootResults.length; i++ ) {
entity = results.GetTasksResult.RootResults[i];
html += '<li>'+entity.DoctorID +' by <b>'+ entity.TaskNote +'</b></li> <br><br> ';
}
document.getElementById('results').innerHTML = html;
}
}
</script>
</head>
<body>
<button type="button" onclick="query()">jquery</button>
<div id="results" />
</body>
</html>
but nothing happens when i click the button,
why is this happening
thank you
You're not using your requester object correctly. All you did is issue a request but didn't wait for its reply. This code works asynchronously but you thought it's synchronous that's why you started processing data bfore you even got it.
Use jQuery to make an Ajax request
$.ajax({
type: "GET",
url: "http://soap.madarat.jo/Services/BusinessApplication1-DomainService1.svc/json/gettasks",
success: function(data, status, xhr){
data = data + "" == data ? $.parseJSON(data) : data;
var el = $("#results").append("<ol></ol>").children("ol").first();
if (data.GetTaskResult) {
$.each(data.GetTaskResult.RootResult, function() {
el.append("<li>" + this.DoctorID + " by <b>" + this.Tasknote + "</b></li>");
});
}
}
});
This may have bugs but it shoudl roughly do the same as your code.
Additionally, you son't need to add json2 library, and I don't know about your jtip.
Best tip I can give you
Try to first get acquainted with libraries you're using. In your case that would be jQuery. It makes it much simpler for you to write browser independent Ajax code. You haven't used even one bit of it even though it's there. Learn it, use it. It shouldn't take you a day to get through all its docs to see how to use it and why it's wise to do so.
jQuery documentation
Is it possible in Javascript to pass a variable through the src parameter? ie.
<script type="text/javascript" src="http://domain.com/twitter.js?handle=aplusk" />`
I'd like twitter.js to look and see if a "handle" was passed before doing what I need it to do and returning its response back to the originating page calling twitter.js.
I had originally created a function in twitter.js that did the following:
function getHandle() {
var vars = [], hash, username;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
if (hash[0] == 'handle')
username = hash[1];
}
return username;
}
The problem, and it makes sense, is that window.location.href is not going to work on a file that I'm calling from <script src="" />
Thanks!
I can see two solutions here.
First: you can process those GET parameters on the server where the twitter.js is hosted, so that it will dynamically change the js file. For example, you file is:
var handle = {{ handle }};
And your server somehow processes the file, replacing that twitter.js template file dependent on what request was sent.
The second option would be to set the global variables on the page where twitter.js is loaded, like this:
<script type="text/javascript">
window.twitter_js_handle = 'aplusk';
</script>
<script type="text/javascript" src="http://domain.com/twitter.js" />
And in twitter.js:
var handle = window.twitter_js_handle || null;
I use the following pattern to convert query variables from <script src="script.js?foo=bar&baz=zing"></script> to an object containing key:value pairs. Code is placed at the top of script.js:
var getVars = {};
(function(){
var scripts, currentScript, queryString;
scripts = document.getElementsByTagName('script');
currentScript = scripts[ scripts.length - 1 ];
queryString = currentScript.getAttribute('src').split("?").pop().split('&');
for(var i=0;i<queryString.length;i++){
var keyVal = queryString[i].split('=');
getVars[ keyVal[0] ] = keyVal[1];
}
}());
// console.info( getVars );
// Object { foo="bar", baz="zing"}
This probably won't work with deferred / asynchronously added script elements, as it relies on immediate code execution.
Sure. But the only way you can access that parameter though is through server-side. So, make twitter.js a PHP page (using mod_rewrite or whatever) that grabs $_GET['handle'] and then serves itself as Content-Type: text/javascript and just dump the contents of the js.
I suggest to use more safe approach - must add an ID:
<script id="myTargetScript" src="http://example.com/file.js?param=value" />
then in your .js file
function GetParams(target_id)
{
var getVars = {};
if( document.getElementById(target_id) )
{
var queryString = document.getElementById(target_id).getAttribute('src').split("?").pop().split("&");
for(var i=0;i<queryString.length;i++){
var keyVal = queryString[i].split('=');
getVars[ keyVal[0] ] = keyVal[1];
}
}
return getVars;
}
// console.log( GetParams('myTargetScript') );