Reproducción automática y detener el audio html5 con jquery

Question

tengo un pequeño problema.

Tengo un facebook como ventana de recuadro en la superposición. Esta casilla se oculta cuando el usuario hace clic como, obviamente. Quiero usar el elemento de audio cuando esta ventana esté visible y detener el audio cuando se oculte esta ventana. Así que este es mi html y jquery. Por favor, ayúdame.

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

Answer 1

Uso :visible selector y añadir .# o de acuerdo a lo que es fb_like_box. fb_like_box no es un selector válido. Asumiendo que es un 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(); 
       }); 
    } 

Answer 2

Creo que el problema principal es que se debe ejecutar la función cuando en el momento en que el campo de facebook se oculta, por lo tanto, es necesario agregar la función de de escucha adecuada. Creo que en esta situación sería 'DOMAttrModified':

Algunos pseudocódigo (código no probado):

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

Answer 3

Su código sintácticamente mal.

En primer lugar, la siguiente sintaxis es para asignar valor.

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

Se asigna la propiedad block al elemento $('#fb_like_box');

Si quieres comprobarlo, ya que eso, hay que usar algo como esto:

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

Una buena manera de hacer lo que están intentando es:

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

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

} else { 

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

} 

Answer 4

prueba algo muy básico como

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

Si esto funciona, entonces al menos sabrá que está en el camino correcto. Una vez que sepa que puede jugar, agregue los condicionales y luego pruebe que están funcionando.