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

Posted 2023-02-25

【中文标题】Javascript - 当 div 为 display=block 时播放音频

【英文标题】：Javascript - Play audio when div is display=block

【发布时间】：2019-04-27 02:24:59

【问题描述】：

当 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>

【参考方案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 属性：<buttononclick='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>

【讨论】：

@Pablo_Web 没问题！编码愉快！

【参考方案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>

【参考方案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>

【参考方案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://***.com/a/16093819/11343720

---

或者

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

【讨论】：

@King Stone，谢谢，但我不知道该放在哪里。我到处都有错误...

更新了我的答案。还是什么问题？