我已经查看了所有内容,但到目前为止什么都没有。我卡住了。
我有一个 html 音频元素,我想用一个 div 来控制它。当我点击 div 时它会播放音乐,但我需要的是当我再次点击它时停止播放但不知道如何停止。
这是音频标签。
<audio class="audioplayer" preload="none" style="display: none;" >
<source src="audio/ocean.mp3" type="audio/mpeg">
</audio>
这是用 div (#ocean) 控制播放的 jquery。
$('#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?
谢谢
最佳答案
字符串没有 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);
}
关于javascript - jquery中的一个div两个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29445546/