如何使用 onclick 函数来赞美音频

Question

功能：

当用户点击 "TAP ME" 图片按钮时，他们将能够听到点击音频。因此，当用户重复点击图像按钮时，点击音频将与用户点击图像按钮相辅相成。

已完成：

当用户点击 "TAP ME" 图片按钮时，我成功地创建了点击点击音频。

问题：

不过，点击声音是对用户点击 "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 属性并在 everycall

之前调用 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/

如何使用 onclick 函数来赞美音频

How to compliment audio with onclick function

javascript

audio

jquery

onclick

onclicklistener