javascript - 单击 div 框时不播放音频
问题描述
我有带有 testpeech 类的 div,当我单击此框时,我的上传文件夹中的音频开始播放。如果再次单击同一个 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>
推荐阅读
- node.js - 如何在量角器页面对象模型中重用函数内部的元素?
- java - 使用 Java 解析 curl 响应
- c# - asp.net mvc中的登录和注册问题?
- react-native - 如何创建具有多行和动态宽度项目的水平 FlatList?
- grpc-python - GRPC Python - 从对等 ipv4 收到错误
- python - 向量化有条件地更改列值的函数
- css - 在内部网格线对齐子元素
- python - 为我的数据框创建带有百分比的单列饼图
- python - Detecting multiply forms on one image
- python - 将字符串转换为 IO[str] 数据类型