javascript - 如何用onclick功能赞美音频

Question

功能:

当用户单击“TAP ME”图像按钮时，他们将能够听到咔嗒声。因此，当用户反复点击图像按钮时，点击音频声音将与用户点击图像按钮相称。

已完成的操作:

当用户单击“TAP ME”图像按钮时，我设法创建了onclick音频。

问题:

虽然，点击声音补充了用户对“TAP ME”图像按钮的点击。但是，当用户开始向“TAP ME”图像按钮发送垃圾邮件时，就会出现此问题。音频将无法弥补“TAP ME”图像按钮的垃圾邮件。

因此，如何将点击音频同步到onclick功能:

我粘贴了以下代码供您引用:

function GameStart() {
  console.log("GameStart");
  x = document.getElementById('GameStar').offsetTop;
  var audioClick = document.getElementById("click");
  //check condition if star reach bottom page limit, else continue to move down
  if (x < bottomStarLimit) {
    console.log("x:" + x);
    x = x + step;
    audioClick.play();
  }
  document.getElementById('GameStar').style.top = x + "px";
}

<div id="GamePage" style="width:1920px; height:3840px; z-index=1;">

  <audio src="lib/Elements/click.mp3">Your browser does not support this audio html5 format</audio>
  <input id="Tap" type="image" src="lib/Elements/Tap%20here%20button.png" onclick="GameStart()" />
</div>

Answer 1

在mp3播放期间禁用该按钮，以使用户无法向其发送垃圾邮件。找出音频的长度并禁用图像按钮(它不会接受任何点击。

您可以使用类似setTimeout(function(){ //re enable your image button here }, 3000); // the 3000 ( is in miliseconds )的东西。在您的onclick函数GameStart中。如果您仍然希望用户向其发送垃圾邮件，则可能需要删除loop，autoplay属性并在每次调用前调用currentTime = 0

function GameStart() {// I removed all other non-concerning code
  var audioClick = document.getElementById("click");
  audioClick.currentTime=0;
    audioClick.play();
}

添加了jsfiddle https://jsfiddle.net/7hn8tkek/