CODEWITHSUNDEEP
jquerycsshtmlaudioplayback
Lukas
Lukas

Reputation: 7734

Auto play and stop html5 audio with jquery

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 {}
}
});

Upvotes: 9

Views: 10388

Answers (4)

Last Rose Studios
Last Rose Studios

Reputation: 2481

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.

Upvotes: 1

Starx
Starx

Reputation: 78981

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();
    });

}

Upvotes: 1

Mario Corchero
Mario Corchero

Reputation: 5575

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);

Upvotes: 0

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

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();
                });
    }

Upvotes: 0

Related Questions