Jquery play sound and go to next page

Question

I am trying to figure out how to do this, I want the viewer to click on one of the image, which is inside a apDiv box, then after 3 seconds when the audio finishes, the next page will load.

This is the code it does go to next page, but it does not play the sound, if I remove the setTimeout function the sound plays just fine.

Where did I go wrong?

$(function(){
$('#apDiv1').click(

function(){$("#laugh")[0].play();},
function(){setTimeout(function(){window.location = 'page1.html';}, 3900); }
)
 });

Sorry for being late, I read lately your comment, added a nice example how to achieve what you need. — Roko C. Buljan, Apr 11 '13 at 13:14

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

You want to write this code as follows

$(function(){
    $('#apDiv1').click(function(){
        $("#laugh")[0].play();
        setTimeout(function(){window.location = 'page1.html';}, 3900);
    });
});

you could probably utilize the code here so that you can swap the sound without having to change the time to setTimeout

edited May 23 '17 at 11:49

Community

1
1

answered Apr 11 '13 at 09:29

Ejaz

8,719
3
34
49

Why don't you add an `addEventListener "ended"` to navigate? – Roko C. Buljan Apr 11 '13 at 09:59
that's because he _might_, sometimes, want to play the sound without the need of redirecting the user afterwards – Ejaz Apr 11 '13 at 10:02
@Ejay your comment makes no sense to me, it's about play a sound and --> navigate. – Roko C. Buljan Apr 11 '13 at 10:06
@roXon that's alright :) actually I now think that I might have misread your comment or misunderstood what you were trying to convey. Can you please add an answer depicting your preferred way of doing it. That'll be a contribution :) – Ejaz Apr 11 '13 at 10:07
I am pretty new to Jquery and Html, so most of the time i am brute forcing the codes, there may be easier way, but this ways for for me now, since the audio only lasted for 3 seconds. roXon how do you use the addEventlistener ? – bunzbox Apr 11 '13 at 12:40
There you go, added an example. – Roko C. Buljan Apr 11 '13 at 13:14

score 0 · Accepted Answer · answered Apr 11 '13 at 13:13

Instead of setting a timeout, which could lead to different problems,
use the audio event listener ended !

LIVE DEMO

$(function(){

    function playOnClick(){          
        var sound = $("#laugh")[0];     
        sound.addEventListener('ended', function() {        
           window.location = 'page1.html';        
        }, false);          
        sound.play();          
   }

   $('#apDiv1').click(function(){
       playOnClick();
   });

});

1

@roXon you _finally_ did it. – Ejaz Apr 11 '13 at 14:17

Jquery play sound and go to next page

2 Answers2