Javascript jquery中的一个div和两个函数

我已经找遍了，但到目前为止什么也没找。我卡住了

我有一个html音频元素，我想用一个div来控制它。当我点击div时，它会播放音乐，但我需要的是当我再次点击它停止播放，但不知道怎么做

这是音频标签

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

我已经写了停止函数，它可以工作，但只有当我把它挂在另一个div上。我试过了。暂停了，但它不工作

如何使用与“播放和停止”相同的div

---

THX

字符串没有

pause

属性，因此请检查

'.audioDemo'。pause

将不起作用。您需要检查普通对象

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);
}

---

考虑以下代码：

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

选择具有索引的元素时，可以使用以下方法：

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

注意：“.audioDemo”。暂停用于检查音频是否暂停是不正确的。表示您无法访问音频对象 这样地。如果要这样做，请使用$（'element'）

---

添加了停止功能：

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

---

如果（'.audioDemo'.paused==false）{

选择器错误您的类的可能副本是

audioplayer

，而不是

audioDemo

。或者

$audioObj.get（0）

.eq（索引）

的目的是通过索引选择一个元素，同时保留附加的jQuery方法，它不能用于获取本机

音频

元素。

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