Javascript - 当 div 为 display=block 时播放音频

Question

当 div .deley 更改为 display: block 时，我正在尝试播放音频，但有些东西不起作用。在线音频剪辑是正确的，这不是问题。我的问题在我的脚本中，但我找不到它。也许.pause is not a function？

可能出了什么问题？

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>

Answer 1

jQuery 对象^✱ 和 JavaScript 对象^? 是不同的。他们不认识彼此，这就是为什么以下陈述不起作用的原因：

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

MediaElement API 仅是纯 JavaScript。 jQuery 无法识别来自所述 API 的任何方法/属性/事件——使用方法 .pause() 和 .play() 以及属性 .paused 和 .currentTime 需要纯 JavaScript 对象。

解决方案

1. 引用纯 JavaScript 对象^?

   • document.querySelector(selector)

2. 取消引用 jQuery 对象^✱

   • $(selector)[0]
     或
     
   • $(selector).get(0)

---

关于 jQuery，还有一些其他重要的事情需要记住：

1. 永远不要使用 onevent 属性：<buttononclick='func();'</button>

2. 将.class 属性分配给元素，避免使用#id 属性。

jQuery 为我们提供的多功能性使这种过时的做法变得不必要且浪费。此外，不再需要 function see() —— see() 的功能现在已集成到 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>

Answer 2

这是一个工作示例。

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>

Answer 3

Jq 对象没有play、pause 事件。您必须将其更改为简单的 javascript 才能访问这些事件。 强调文字 看看下面，我还为你简化了功能

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>

Answer 4

$(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

---

或者

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