Auto play and stop html5 audio with jquery

Question

i have a little problem.

I have a facebook like box window on overlay. This box hide when user click like - obviously. I wanna to use audio element when this window is visible and stop audio when this window will be hide. So this is my html and jquery. Please help me.

<audio id="audio_player" loop="loop">
    <source src="fileadmin/templates/main/crowd.mp3" type='audio/mpeg; codecs="mp3"'>
    <source src="fileadmin/templates/main/crowd.ogg" type='audio/ogg; codecs="vorbis"'>
</audio>

$(document).ready(function(){
function audio_player (){
    if (
        $('fb_like_box').css('display','block')){
            $('audio').each(function() {
                var song = $(this);
                    song.play();
                });
    }
    else if (
        $('fb_like_box').css('display','none')) {
            $('audio').each(function() {
                var song = $(this);
                    song.pause();
                });
    }
    else {}
}
});

score 1 · Answer 1 · answered Jun 04 '12 at 08:43

1

Your code syntactically wrong.

First of all, the following syntax is for assigning value.

$('#fb_like_box').css('display','block')

It assigns the property block to element $('#fb_like_box');

If you want to check it, as that, you have use something like this:

if($('#fb_like_box').css('display') == 'block') {
    // then do something
}

A good way to do what you are attempting is:

if ($('#fb_like_box').is(':visible')) {

    $('audio').each(function() {
        $(this).play();
    });

} else {

    $('audio').each(function() {
        $(this).pause();
    });

}

answered Jun 04 '12 at 08:43

Starx

77,474
47
185
261

http://mylovedcreation.pl/wp-content/uploads/2012/06/Zrzut-ekranu-2012-06-4-o-11.06.42.png – Lukas Jun 04 '12 at 09:11
@ŁukaszBorawski, Your selector is `$(".fb_like_box")` – Starx Jun 04 '12 at 12:18

score 1 · Answer 2 · answered Jul 19 '13 at 21:15

1

try something very basic like

$(document).ready(function(){
  $('audio')[0].play();
}

If this runs, than at least you know you are on the right track. Once you know you can play it, add the conditionals, and then test that they are working.

answered Jul 19 '13 at 21:15

Last Rose Studios

2,461
20
30

score 0 · Answer 3 · answered Jun 04 '12 at 08:32

Use :visible selector and add . or # according to what fb_like_box is. fb_like_box is not a valid selector. Assuming it's an ID

if ($('#fb_like_box').is(':visible')){
      // like box visible, play audio
            $('audio').each(function() {
                var song = $(this);
                    song.play();
                });
    }
    else {
      // like box hidden pause audio  
            $('audio').each(function() {
                var song = $(this);
                    song.pause();
                });
    }

score 0 · Answer 4 · answered Jun 04 '12 at 08:39

I think the main problem is that you should run the function when at the moment that the facebook field is hidden, therefore, you need to add the function to de adequate listener. I think that in this situation it would be 'DOMAttrModified':

Some pseudocode(not tested code):

$('facebookelementtohide').addEventListener('DOMAttrModified', function(e){
   audio_player ();
}, false);

Auto play and stop html5 audio with jquery

4 Answers4