<audio> in hidden div

Asked

Viewed 50 times

0

I have a div with display:None and this div has an audio, but if I use autoplay, even the hidden div, the audio is playing, I would like you to play the audio only when the div is appearing. Can you help me?

<div class="fig1"></div>

.fig1{display:none}
.evnt1{display:block}

<script>$('.fig1').click(function(){
$('.fig1').show('slow');});
</script>
jquery

  • It’s to stop playing when the div has finished appearing?

  • is to play only when the div appears

2 answers

2

Try putting a id in your audio and do as follows: 

<audio id="myAudio" src="some_audio.mp3"></a>
<div class="fig1"></div>

.fig1{display:none}
.evnt1{display:block}

<script>$('.fig1').click(function(){
    $('.fig1').show('slow', function(){
        document.getElementById('myAudio').play();
    });});
</script>

  • Very correct too, but from what I understand it uses jquery!

  • According to the method documentation show jQuery, available at http://api.jquery.com/show/ it can receive a callback function that will be triggered as soon as the animation is finished. What I did was send this function and, within it, give play(). I hope you solved your problem

1

You can get the Dsplay value from your div with the code below then use an if to determine the action on the audio.

var display = $('.fig1').css('display');
var som =$(soundobj);
if(display == 'none'){
   som.stop();
   // para o audio.
}else som.play();

I have not done conferences on the code adapt to your needs Good luck!

  • It didn’t work! If I use autoplay goes straight, if I don’t use it, it doesn’t play. I use Click to remove the display=None, but the audio doesn’t follow the None.

  • Post the complete example for correction !

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.