How to start annyang API to listen after one click on a start botton

Question

I'm not sure if this is a bug. I try to make an even 'onclick' on a start bottom and start listening any word to start the program. But right now is playing the first audio automatically every time when I refresh the page after 3 seconds. Did I do something wrong? Any help would be helpful. Thank you in advance.

<script>                          
    if (annyang) 
    {
        function playFirstAudio()
        {
            audio.src = dir + playList[audioIndex] + extention;
            audio.load();
            setTimeout(function(){audio.play();}, 3000);
        }

        var playList = ["1_hello", "2_how_old", "3_what_did_you_make"];
        var dir = "sound/";
        var extention = ".wav";

        var audioIndex = 0;
        audio = new Audio();

        //annyang.addCallback('start', playFirstAudio);

        audio.onended = playFirstAudio();

        annyang.debug(true);
    };
</script>

<div class="container">
    <button id="runProgram" onclick='annyang.start();' class="runProgrambutton">Start</button>
</div>

Alexander Higgins · Accepted Answer · 2017-07-11T22:36:01.210

0

You are calling the playFirstAudio() when you are trying to set the audio.ended callback. Note: audio.ended not audio.onended

audio.onended = playFirstAudio(); //<-- this is calling playFirstAudio();

You assign a call back function by specifying the method name without (), like this:

 audio.onended = playFirstAudio;

Otherwise, wrap it in a anonymous function like this:

 audio.onended = function() { playFirstAudio(); };

Your button click is firing the voice recognition to start.

But you also need to register a call back to fire when a sound is heard by the voice recognition engine:

<script>  
    var audio = new Audio();                        
    if (annyang) 
    {
        annyang.addCallback('start', function() {console.log('started listening');});
        annyang.addCallback('soundstart', function {onSoundDetected();});            

        function onSoundDetected() {
            console.log('sound was detected');
            playNextAudio();
        }
        var playList = ["sound/1_hello.wav", "sound/2_how_old.wav", "sound/3_what_did_you_make.wav"];
        var audioIndex = 0;

        function playNextAudio()
        {
            audio.src = playList[audioIndex++];
            audio.load();
            audioIndex= audioIndex % playList.Length;// start at zero when we reach the end.

        }
        audio.ended = function() {playNextAudio()};
        audio.oncanplay = function() {audio.play();}
        annyang.debug(true);
    };
</script>

<div class="container">
    <button id="runProgram" onclick='annyang.start();' class="runProgrambutton">Start</button>
</div>

edited Jul 11 '17 at 22:36

answered Jul 11 '17 at 06:15

Alexander Higgins

6,765
1
23
41

Thanks for replying. But if I do audio.onended = playFirstAudio; it would try to listen but it doesn't play audio file. And if I do the anonymous function, it would also try to listen but doesn't play the audio file. – Johnny Jul 11 '17 at 20:59
Based on the W3school, it shows an example, In JavaScript: object.onended = function(){myScript}; – Johnny Jul 11 '17 at 21:09
There are various semantics but this puts out nothing: `var myScript = function() {console.log('hello world');}; var d=[]; d.onended = function(){myScript}; d.onended();` However if you use this `var myScript = function() {console.log('hello world');}; var d=[]; d.onended = function(){myScript()}; d.onended();` it outputs `hello world`. You can do some research to learn the difference. – Alexander Higgins Jul 11 '17 at 21:26
You are right. I just tested it. So What's the problem of my code even if I do audio.onended = function() { playFirstAudio(); }; , it started listen to sound, but after I say one, it still doesn't play audio? – Johnny Jul 11 '17 at 21:35
You are not wiring into the events of the API to trigger the audio to play. Also `onended` is not the correct function. See updates – Alexander Higgins Jul 11 '17 at 22:00
You are my savior, Alex. It's working now even if the sample you provided is not my plan. I love you sir!! – Johnny Jul 11 '17 at 22:30

How to start annyang API to listen after one click on a start botton

1 Answers1