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对象。

解决方案

引用普通JavaScript对象
- document.querySelector(selector)
取消引用jQuery对象^✱
- $(selector)[0]
  或
- $(selector).get(0)

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

请勿使用onevent属性：<button ~~onclick ='func（）;'~~ </button>
将.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

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

Answer 3

这是一个可行的示例。

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 4

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>

Javascript-在div为display = block

4 个答案:

解决方案