ResponsiveVoice calls onend callback only once for multiple utterances

Question

ResponsiveVoice calls onend callback only once for multiple utterances

1.3k Views Asked by ANAND KUMAR At 30 May 2017 at 06:39

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>

Original Q&A

There are 1 best solutions below

**Nikolay Shmyrev** · Answer 1 · 2017-06-18T10:47:26.217000

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);
        });
    });
});

ResponsiveVoice calls onend callback only once for multiple utterances

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CALLBACK

Related Questions in TEXT-TO-SPEECH

Related Questions in RESPONSIVEVOICE

Trending Questions

Popular # Hahtags

Popular Questions