1

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/

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Jeremy Person
  • 171
  • 1
  • 3
  • 13
  • 1
    Please edit the externally hosted code into the post; doing so will make sure it remains useful even if the link breaks. My script [is not allowed to do this](https://meta.stackoverflow.com/a/344512/4751173) because of potential licensing problems. – Glorfindel Feb 13 '22 at 09:01

1 Answers1

3

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();
        }
});
br3t
  • 1,646
  • 2
  • 20
  • 27
  • Here is the updated fiddle. Could you update it so I can better understand how it would work? Thank you https://jsfiddle.net/kb02oLpu/1/ – Jeremy Person Nov 21 '16 at 01:01
  • 1
    @JeremyPerson You can use [this fiddle](https://jsfiddle.net/ehsant/kb02oLpu/2/) and also if this answer has helped to solve your problem, please select it as accepted answer and give it an upvote... – EhsanT Nov 21 '16 at 01:59
  • Thank you, here is the final fiddle if it is helpful to anyone. https://jsfiddle.net/kb02oLpu/3/ – Jeremy Person Nov 21 '16 at 02:46