javascript - 当我单击div框时,音频无法播放

标签 javascript jquery html audio

我的div带有testspeech类,当我单击此框时,来自我的上载文件夹的音频开始播放。
如果再次单击同一div,如何暂停音频?
最终结果是像正常播放/暂停按钮一样播放和暂停音频。

var obj = document.createElement("audio");
var counts = 0;
console.log(counts);
document.body.appendChild(obj);
obj.src = ".../wp-content/uploads/audios/Kalimba.mp3";
obj.load();
obj.volume = 0.3;
obj.preLoad = true;
obj.controls = true;
//obj.autoplay = true;

$(".testspeech").click(function() {
    if(counts == 0){
        console.log(counts);
        obj.play();      
    }
    else{
        obj.pause();
        counts = 0;   
        console.log(counts);
    }
});

我用CSS从屏幕上隐藏了按钮:
audio{
    display: none;
}

现在,当我单击音频时,音频会播放,但不会停止。

最佳答案

检查音频“已暂停”属性。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button class="testspeech">
play/pause
</button><br/>
<script>
var obj = document.createElement("audio");
document.body.appendChild(obj);
obj.src = ".../wp-staging/07/wp-content/uploads/audios/Kalimba.mp3";
obj.load();
obj.volume = 0.3;
obj.preLoad = true;
obj.controls = true;

$(".testspeech").click(function() {
   obj.paused?obj.play():obj.pause()
});
</script>
</body>
</html>

关于javascript - 当我单击div框时,音频无法播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56143987/

相关文章:

javascript - 为什么你必须用匿名函数包装回调?

jquery-plugins - JQuery 复选框 TreeView

php - 联系表 谢谢 页面顶部

javascript - 是否有 JavaScript/HTML5 代码可以将任何视频格式转换为 mp4 格式,然后上传到存储服务器以便在任何客户端上观看?

html - 背景图像在 css 中不起作用

javascript - 如何使用Backbone来做简单的动画?

javascript - d3 : How to get stacked graph to zoom?

javascript - 如何为 Shopify 主题创建 "smarter"色板

javascript - 选中时在每个复选框中触发更改事件

jQuery 如果 myDiv 是 :visible, addclass 到另一个元素