如何用onclick功能补充音频

Functionality:

When user clicks on the "TAP ME" image button, they will be able to hear the click audio sound. Hence, when user is to tap the image button repetitively, the click audio sound will be in compliment with the user tapping of the image button.

当用户点击“TAP ME”图像按钮时,他们将能够听到咔嗒声音。因此,当用户要重复点击图像按钮时,点击音频声音将与用户点击图像按钮相配合。

What has been done:

做了什么:

I have managed to create onclick tap audio when user clicks on the "TAP ME" image button.

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

Issue:

Though, the click sound compliments the user onclick of the "TAP ME" image button. However, the issue arises when the user starts to spam the "TAP ME" image button. The audio will not be able to compliment the spamming of the "TAP ME" image button.

但是,点击声音使用户点击“TAP ME”图像按钮。但是,当用户开始垃圾邮件“TAP ME”图像按钮时会出现问题。音频将无法补充“TAP ME”图像按钮的垃圾邮件。

Hence, how is it possible to sync the click audio to onclick function:

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

I have pasted the following code for your reference:

我已粘贴以下代码供您参考:

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>

1 个解决方案

#1

Disable the button for the duration of the mp3 play, so that the users can not spam it. find out the length of the audio and disable the image button ( it would not accept any click.

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

You can use something like setTimeout(function(){ //re enable your image button here }, 3000); // the 3000 ( is in miliseconds ). In your onclick function GameStart. If you still want to have the user to spam it, then you might want to remove the loop , autoplay attributes and call currentTime=0 before everycall

您可以使用类似setTimeout(function(){//在此处启用图像按钮},3000); // 3000(以毫秒为单位)。在您的onclick功能GameStart中。如果您仍希望让用户对其进行垃圾邮件,那么您可能希望删除循环,自动播放属性并在每次调用之前调用currentTime = 0

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

Added the jsfiddle https://jsfiddle.net/7hn8tkek/

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

#1