ResponsiveVoice calls the onend callback only once for multiple statements
I want to highlight a specific couple / list with their respective voice.
Is there a callback in responsivevoice.js. I got a callback function. But it doesn't work.
whenever i put the console instead of the selection it only produces one, not three.
I think onend only calls the first pair. But it should work for all para / ul
Please help me.
My code: -
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.responsivevoice.org/develop/1.5.2/responsivevoice.js"></script>
<script>
var currentDataValue =0;
$( document ).ready(function(){
$("#1").click(function(){
$("p,ul").each(function( index, element){
responsiveVoice.speak($(this).text(),$('UK English Female').val(),{
pitch: .7,
onend: function() {
$(this).css( "backgroundColor", "yellow" );
}
});
});
});
});
$( document ).ready(function(){
$("#2").click(function(){
responsiveVoice.pause();
});
});
$( document ).ready(function(){
$("#3").click(function(){
responsiveVoice.resume();
});
});
$(window).load(function(){
$("#4").click(function(){
responsiveVoice.cancel();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<ul>
<li>this unoder list </li>
</ul>
<p id="test">This is another paragraph.</p>
<button id="1">start</button>
<button id="2">pause</button>
<button id="3">resume</button>
<button id="4">stop</button>
</body>
</html>
+3
source to share
1 answer
Well this ResponsiveVoice is a commercial buggy library, it sets a single variable for the callback, so it only calls the last configured callback, not all of them. You can, of course, modify the library, or you can work on calling elements one by one like this:
$("#1").click(function(){
var elements = $("p, ul");
speak = function(i, elements) {
responsiveVoice.speak($(elements[i]).text(),$('UK English Female').val(),{
pitch: .7,
onend: function() {
$(elements[i]).css("backgroundColor", "yellow");
if (i < elements.length) {
speak(i + 1, elements);
}
}
});
};
speak(0, elements);
});
I would just use the Chrome API like this:
var currentDataValue =0;
$( document ).ready(function(){
$("#1").click(function(){
var voice = speechSynthesis.getVoices().filter(function(voice){return voice.name == 'Allison'; })[0];
$("p,ul").each(function(index, element) {
u = new SpeechSynthesisUtterance($(this).text());
u.voice = voice;
u.onend = (function() {
console.log("Here");
$(this).css( "background-color", "yellow" );
}).bind($(this));
speechSynthesis.speak(u);
});
});
});
0
source to share