I have a form in which I have implemented Simple captcha every thing is working fine but I want audio captcha to be played when users click on play button. In my case audio gets played default on page load.
Below is my code for audio captcha
public class MyAudioCaptcha extends AudioCaptchaServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
try {
MyTextProducer myTextProducer = (MyTextProducer) req.getSession().getAttribute("myTextProducer");
if(myTextProducer == null){
myTextProducer = new MyTextProducer();
}
AudioCaptcha ac = new AudioCaptcha.Builder().
addAnswer(myTextProducer).
addNoise().
build(); // Required
CaptchaServletUtil.writeAudio(resp, ac.getChallenge());
req.getSession().setAttribute("audioCaptcha", ac);
} catch (Exception e) {
Util.AppendExceptionToLog(e);
}
}
}
JSP code:
<script>
$(document).ready(function(){
reloadCaptcha();
});
function reloadCaptcha(){
var d = new Date();
$.ajax({
url:"captcha.jsp",
type :"POST",
async:true,
data: {
'action': 'generateCaptcha' ,
},
success:function(response){
$("#captcha_image").attr("src", "../../simpleCaptcha.png?"+d.getTime());
$("#captcha_audio").attr("src", "../../audio.wav?"+d.getTime());
},
});
}
</script>
<body>
<td>
<div class="inputfield" style="margin-left: 10px;">
<img id="captcha_image" />
<img src="../../images/reload.jpg" onclick="reloadCaptcha()" style="cursor: pointer;" alt="reload"width="30" height="30"/>
</div>
</td>
<td>
<audio controls autoplay id="captcha_audio" autoplay = "false"></audio>
</td>
</body>
Is there any configurable in above code so that audio do not play on page load, to be played only if user click on audio captcha 
You configued the
autoplayandautoplay = "false"in the<audio>tag, you should remove them.The autoplay attribute is a boolean attribute.
When present, the audio will automatically start playing as soon as it can do so without stopping.
-- From w3cschool