ResponsiveVoice calls onend callback only once for multiple utterances

Question

I want to highlight particular para/list with their corresponding voice.

Is there any callback in responsivevoice.js. I got onend as callback function.But it is not working .

whenever I am putting console instead of highlight , it is producing only one instead of three.

I think onend is calling after only first para .But it should work for all para/ul

Please help me out..

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>

Nikolay Shmyrev · Answer 1 · 2017-06-19T08:21:41.070

Well, this ResponsiveVoice is a commercial library with bugs, it sets the single variable for callback, so it calls only the last configured callback, not all of them. You can modify the library of course or you can work around calling items 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 simply use Chrome API instead 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);
        });
    });
});

Thanks for response . Voice is woking properly But problem is a callback only that is not woking for every para /ul. U can also check by $(this).css( "backgroundColor", "yellow" ); with some log(print). It is printing only one times .But it should be 3 times after voice synthesis of every para/ul. — ANAND KUMAR, Jun 18 '17 at 16:31
Since , they(responsive voice) have handled a lot of cases.like :- large senteces(more than 200 words) , quality of voice , compatiblity of browser etc .So I was using them.if I will go like u(It is valid for demo) then I have to handle a lot of cases. — ANAND KUMAR, Jun 19 '17 at 02:44

ResponsiveVoice calls onend callback only once for multiple utterances

1 Answers1