Search code examples
javascriptjqueryaudioresponsivevoice

Responsive Voice: Showing a Div After Detecting End of Audio to be Played

I am using responsivevoice.js to play audio for a simulated tutorial. I am hiding and showing divs based on where the learner is within the process of four total steps.

The problem is the next step shows before the audio is finished playing. For instance I would like the first step to not render until the #intro is done playing. I would then like #step1 to play and show #step2 once the audio for #step1 is completed and so on. Thank you very much for your assistance.

https://jsfiddle.net/kb02oLpu/

Solution

  • You should use onend callback (http://responsivevoice.org/text-to-speech-sdk/using-callbacks/), something like

      responsiveVoice.speak($('#step1').text(), 'UK English Male', {
        pitch: .7,
        onend: function() {
            $("#step1").hide();
            $("#step2").show();
        }
});