0

I have a delayed display div. I want to add sound when div is visible. How can I do this?

$(document).ready(function(){
    $(".deley").hide();
    setTimeout(function () {
        $(".deley").show();
    }, 5000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deley">TEXT</div>
PeterMader
  • 6,987
  • 1
  • 21
  • 31
Mousebucks
  • 59
  • 8
  • 3
    Possible duplicate of [Playing audio with Javascript?](https://stackoverflow.com/questions/9419263/playing-audio-with-javascript) –  Jun 16 '17 at 13:29

2 Answers2

0

$(document).ready(function(){
    $(".deley").hide();
    setTimeout(function () {
        $(".deley").show();
        $(".audioPlayer")[0].play();
        
    }, 5000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deley">TEXT</div>
<audio class="audioPlayer">
  <source src="horse.ogg" type="audio/ogg">
  <source src="http://op.50megs.com/house!.wav" type="audio/wav">
</audio>
sumit chauhan
  • 1,270
  • 1
  • 13
  • 18
0

The simplest way would be to include it in whatever event listener you're using to toggle the element's display value.

When hiding (i.e. $(".deley").hide();:

    $("#epicSound").pause();
    $('#epicSound").currentTime = 0;

When showing (i.e. $('.deley').show()):

    $("#epicSound").play();

Your code:

<script type="text/javascript">
$(document).ready(function(){
    $(".deley").hide();
    // if sound is currently playing, stop it and reset
    if(!$("#epicSound").paused) {
        $("#epicSound").pause();
        $("#epicSound").currentTime = 0;
    }
    setTimeout(function () {
        $(".deley").show();
        $("#epicSound").play();            
    }, 5000);
});
</script>
<div class="deley">TEXT</div>
<audio id="epicSound">
  <source src="epicSound.ogg" type="audio/ogg">
  <source src="epicSound.mp3" type="audio/mpeg">
</audio>
James Jarvis
  • 26
  • 4