onlick 事件检测双击
[英]onlick event detect double click
问题描述
Im new here, my problem is that Im trying to play music or another sound with an onclick event, the problem begin when I try to stop that sound, I expect that the sound stop, but the sound begin ring again, here is the javascript code:
我是新来的，我的问题是我试图用 onclick 事件播放音乐或其他声音，当我试图停止那个声音时问题开始了，我希望声音停止，但声音又开始响了，这里是 javascript代码：
const playToPause = document.getElementById("play-song");
// main audio functions
function playSound() {
const audio = new Audio("track_path");
addEventListener("click", _ => {
switch (playToPause.value) {
case "pause":
audio.play();
playToPause.value = "play";
break;
case "play":
audio.pause();
playToPause.value = "pause"
}
console.log(playToPause.value);
});
};
And here is the button element这是按钮元素
<button id="play-song" value="pause" onclick="playSound()" class="fa-solid fa-play fa-3x action-buttons"></button>
i had try before with if...else if, sentence and i changed it by a switch sentence thinking that the problem was on if...else if.我之前曾尝试使用 if...else if, sentence 并且我通过一个 switch 语句更改了它，认为问题出在 if...else if 上。
Later I use a console.log to see the value of the button and I get this the first time that I click it:browser console as code tag with "```")后来我使用 console.log 查看按钮的值，我第一次单击它时得到了这个：浏览器控制台作为带有“```”的代码标签）
the console show that: play jquery.client.js:16控制台显示： play jquery.client.js:16
But if I click again on the button, to stop the sound, it detect as a double click但是，如果我再次单击按钮以停止声音，它会检测为双击
The console show that:控制台显示：
play jquery.client.js:16 (The first click)
pause jquery.client.js:16
play jquery.client.js:16
Sorry, for my bad english, I hope that anyone can help thanks in advance:)对不起，我的英语不好，我希望任何人都可以帮助提前感谢:)
2 个解决方案
解决方案1
0 已采纳 2022-03-27 12:44:19
Your problem is that you're redefining the audio variable each time the function is executing - with the result that the audio.play() or audio.pause() is playing or pausing that just-created sound.您的问题是每次执行 function 时您都在重新定义audio变量 - 结果是audio.play()或audio.pause()正在播放或暂停刚刚创建的声音。 It does nothing with any that were previously playing.它对之前播放的任何内容都没有任何作用。
To fix, just move the definition of audio outside the function.要修复，只需将audio定义移到 function 之外。
Also, as @Ivar says in his comment, your addEventListener should not be inside the function, or you add new listeners each time.另外，正如@Ivar 在他的评论中所说，您的addEventListener不应在 function 内，否则您每次都会添加新的侦听器。 Your function will already run each time the button is clicked because of the inline onclick attribute on the button.由于按钮上的内联onclick属性，您的 function 将在每次单击按钮时运行。
So change your code to this:因此，将您的代码更改为：
const playToPause = document.getElementById("play-song");
const audio = new Audio("track_path");
// main audio functions
function playSound() {
switch (playToPause.value) {
case "pause":
audio.play();
playToPause.value = "play";
break;
case "play":
audio.pause();
playToPause.value = "pause"
}
console.log(playToPause.value);
};
解决方案2
0 2022-03-27 13:06:53
<!-- User Audio Tag -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio id="audio-tag">
<source src="./partham-ganesh-besado-re.mp3" type="audio/ogg">
<source src="./partham-ganesh-besado-re.mp3" type="audio/mpeg">
</audio>
<button onclick="play()" type="button">Play</button>
<button onclick="pause()" type="button">Pause</button>
<script>
var audio = document.getElementById("audio-tag");
function play() {
audio.play();
}
function pause() {
audio.pause();
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.