Автоматическое воспроизведение и остановка html5 аудио с jquery

Question

У меня есть небольшая проблема.

У меня есть facebook как окно окна на оверлей. Этот ящик скрывается, когда пользователь нажимает - очевидно. Я хочу использовать аудиоэлемент, когда это окно будет видимым и остановить звук, когда это окно будет скрыто. Так что это мой html и jquery. Пожалуйста, помогите мне.

<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

Используйте :visible селектор и добавить . или # в соответствии с тем, что fb_like_box есть. fb_like_box недействительный селектор. Если предположить, что это 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

Я думаю, что главная проблема заключается в том, что вы должны запустить функцию, когда в тот момент, когда поле facebook скрыто, поэтому вам нужно добавить функцию де адекватный слушатель. Я думаю, что в этой ситуации было бы «DOMAttrModified»:

Некоторые псевдокод (не тестировалось код):

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

Answer 3

Ваш код синтаксически неправильно.

Прежде всего, для назначения значения используется следующий синтаксис.

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

Он присваивает свойству block элементу $('#fb_like_box');

Если вы хотите, чтобы проверить его, так как это, вы должны использовать что-то вроде этого:

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

Хороший способ сделать то, что вы находятся в полевых условиях:

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

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

} else { 

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

} 

Answer 4

попробуйте что-то очень простое например

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

Если это работает, по крайней мере, вы знаете, что находитесь на правильном пути. Как только вы знаете, что можете играть в нее, добавьте условные обозначения, а затем проверьте, что они работают.