jquery中的一個div的兩個函數

Question

我已經看遍了，但沒有到目前爲止。我卡住了。

我有一個html音頻元素，我想用div控制它。當我點擊div播放音樂時，但我需要的是當我再次點擊它停止播放但不知道如何。

這是音頻標籤。

<audio class="audioplayer" preload="none" style="display: none;" > 
    <source src="audio/ocean.mp3" type="audio/mpeg"> 
</audio> 

這是jquery控制div（#ocean）的玩法。

$('#ocean').click(function() { 
      if ('.audioDemo'.paused == false) { 
       $(".audioDemo").trigger('pause'); 
      } else { 
       $(".audioDemo").trigger('play'); 
      } 
     }); 

     function stopAudio(){ 
      $(".audioDemo").trigger('pause'); //pause playing 
      $(".audioDemo").prop("currentTime",0); //set play time to 0 
     } 

我寫了停止功能，它的工作原理，但只有當我把它掛在另一個div上。我已經嘗試過這個.paused，但它不起作用。

如何使用同一個div作爲播放和停止？

THX

Answer 1

字符沒有pause財產，所以檢查'.audioDemo'.pause將無法​​正常工作。您需要檢查HTMLAudioElement對象pause屬性。

所以使用jQuery的幫助下，你選擇$(".audioDemo") jQuery對象集合，並從那裏你會得到原始的HTML元素作爲該集合的第一個元素：

$('#ocean').click(function() { 
    if ($(".audioDemo")[0].paused == false) { 
     $(".audioDemo").trigger('pause'); 
    } else { 
     $(".audioDemo").trigger('play'); 
    } 
}); 

還是有點優化代碼：

$('#ocean').click(function() { 
    var $audioObj = $(".audioDemo"); 
    $audioObj.trigger(!$audioObj[0].paused ? 'pause' : 'play'); 
}); 

function stopAudio() { 
    $(".audioDemo").trigger('pause').prop("currentTime", 0); 
} 

Answer 2

考慮這下面的代碼：

$('#ocean').click(function() { 
    if ($(".audioDemo").get(0).paused == false) { 
     $(".audioDemo").trigger('pause'); 
    } else { 
     $(".audioDemo").trigger('play'); 
    } 
}); 

您可以使用以下方法，而與指數選擇的元素：

$("#element")[index] 
$("#element").get(index) 
$("#element").eq(index) 

Demonstration

注意： 」 .audioDemo'.pause 是不正確檢查音頻暫停與否。意思是你不能訪問音頻對象 是這樣的。如果你想這樣做，使用$（'element'）。加入

---

停止功能：

$('#stop').click(function(){ 
    $(".audioDemo").trigger('pause'); //pause playing 
    $(".audioDemo").prop("currentTime",0); //set play time to 0 
}); 

Updated Demo