Javascript - Play audio when div is display=block

Question

I'm trying to play audio when the div .deley change to display: block, but something does not work. The online audio clips are correct, it's not the problem. My problem is in my script, but I can not find it. Maybe .pause is not a function?

What could be wrong?

function see() {
  var x = document.getElementById("deley");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
};

// === Scrip for audio play ====

$(document).ready(function(){
    $(".deley").hide();
    // if sound is currently playing, stop it and reset
    if(!$("#notify").paused) {
        $("#notify").pause();
        $("#notify").currentTime = 0;
    }
    setTimeout(function () {
        $(".deley").show();
        $("#notify").play();            
    }, 0);
});

#cont {
  width:200px;
  margin:0 auto
}

.deley {
  display:none;
  width:96px;
  height:40px;
  background:red;
  margin:20px 0;
  text-align:center;
  line-height:40px;
  font-family:Arial, sans-serif;
  color:#fff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont">

<div class="deley" id="deley">Deley</div>

<audio id="notify">
  <source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.ogg" type="audio/ogg">
  <source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3" type="audio/mpeg">
</audio>

<button onclick="see()">Open / Close</button>
  
</cont>

zer00ne · Accepted Answer · 2019-04-27T03:51:01.147

jQuery Objects^✱ and JavaScript Objects are different. They do not recognize one another which is why the following statements do not work:

if (!$(".notify").paused) {
  $(".notify").pause();
  $(".notify").currentTime = 0;
...
  $(".notify").play();

The MediaElement API is Plain JavaScript only. Any methods/properties/events from said API is not recognized by jQuery -- Plain JavaScript Objects are needed to use methods .pause() and .play(), and properties .paused and .currentTime.

Solutions

Reference a Plain JavaScript Object
- document.querySelector(selector)
Dereference a jQuery Object^✱
- $(selector)[0]
  OR
- $(selector).get(0)

There are a couple of other important things to remember about jQuery:

Never use onevent attributes: <button~~onclick='func();'~~</button>
Assign .class attributes to elements avoid #id attributes.

The versatility jQuery affords to us makes such antiquated practices unnecessary and wasteful. Also, the function see() is no longer needed -- functionality of see() is now integrated into function audioSwitch().

$('button').on('click', audioSwitch);

function audioSwitch(e) {
  if (!$(".notify")[0].paused || $('.delay').is(':visible')) {
    $(".notify")[0].pause();
    $(".notify")[0].currentTime = 0;
    $(".delay").hide();
  } else {
    setTimeout(function() {
      $(".notify")[0].play();
      $(".delay").show();
    }, 750);
  }
}

.cont {
  width: 200px;
  margin: 0 auto
}

.delay {
  display: none;
  width: 96px;
  height: 40px;
  line-height: 40px;
  background: red;
  color: #fff;
  margin: 20px 0;
  text-align: center;
  font-family: Arial, sans-serif;
}

<section class="cont">

  <figure class="delay">
    <figcaption>Delay</figcaption>
  </figure>

  <audio class="notify" src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3">
</audio>

  <button>Open / Close</button>

</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

@Pablo_Web no problem! Happy coding! – zer00ne Apr 27 '19 at 16:42 — zer00ne, Apr 27 '19 at 16:42

score 2 · Answer 2 · answered Apr 27 '19 at 03:30

Here is a working example.

function see() {
  var x = document.getElementById("deley");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
};

// === Scrip for audio play ====

$(document).ready(function(){
    $(".deley").hide();
    // if sound is currently playing, stop it and reset
    if(!$("#notify")[0].paused) {
        $("#notify")[0].pause();
        $("#notify")[0].currentTime = 0;
    }
    setTimeout(function () {
        $(".deley").show();
        $("#notify")[0].play();            
    }, 0);
});

#cont {
  width:200px;
  margin:0 auto
}

.deley {
  display:none;
  width:96px;
  height:40px;
  background:red;
  margin:20px 0;
  text-align:center;
  line-height:40px;
  font-family:Arial, sans-serif;
  color:#fff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont">

<div class="deley" id="deley">Deley</div>

<audio id="notify">
  <source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.ogg" type="audio/ogg">
  <source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3" type="audio/mpeg">
</audio>

<button onclick="see()">Open / Close</button>
  
</cont>

score 2 · Answer 3 · answered Apr 27 '19 at 04:00

Jq object dose not have play, pause events. you will have to change it to a simple javascript to access those events. emphasized text Have a look below and i also simplified the function fot you

function see() {
   $(".deley").toggle("fast", function(){
     var player= $("#notify")[0];
    // is the player hidden then pause and reset
    if($(this).is("hidden")) {
        player.pause();
        player.currentTime = 0;
    }else
      player.play();  
    });
};

#cont {
  width:200px;
  margin:0 auto
}

.deley {
  display:none;
  width:96px;
  height:40px;
  background:red;
  margin:20px 0;
  text-align:center;
  line-height:40px;
  font-family:Arial, sans-serif;
  color:#fff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont">

<div class="deley" id="deley">Deley</div>

<audio id="notify">
  <source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.ogg" type="audio/ogg">
  <source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3" type="audio/mpeg">
</audio>

<button onclick="see()">Open / Close</button>
  
</cont>

Wang Liang · Answer 4 · 2019-04-27T02:41:21.990

1

$(document).ready(function(){
    $(".deley").hide();
    // if sound is currently playing, stop it and reset
    if(!$("#notify")[0].paused) {
        $("#notify")[0].pause();
        $("#notify")[0].currentTime = 0;
    }
    setTimeout(function () {
        $(".deley").show();
        $("#notify")[0].play();            
    }, 0);
});

https://stackoverflow.com/a/16093819/11343720

Or

 document.getElementById('notify').play();

edited Apr 27 '19 at 02:41

answered Apr 27 '19 at 02:27

Wang Liang

4,244
6
22
45

**@King Stone**, Thanks, but I can not know where to put it. I have errors everywhere... – Pablo_Web Apr 27 '19 at 02:38
Updated my answer. Or what problem? – Wang Liang Apr 27 '19 at 02:41

Javascript - Play audio when div is display=block

4 Answers4

Solutions