Implementation Details

Using JavaScript, keydown events in the answer box are trapped, and used to play or rewind the sound. The sound is manipulated using SoundManager 2, which uses Flash. At present, only mp3 files are supported.

How to put a Usable Audio CAPTCHA on your website

We assume that you already have an Audio CAPTCHA from some source, such as reCAPTCHA. Copy the UAC script to the directory containing the website, along with the soundmanager2.js and soundmanager2.swf files. Add the following lines of code somewhere after the location of the Audio CAPTCHA:

<script type="text/javascript" src="soundmanager2.js">
<script type="text/javascript" src="uacaptcha.js">
</script>
<script type="text/javascript">
initializeUAC(<mp3-url>,<answer-box>);
</script>

where <mp3-url> is the URL of the mp3 file, and <answer-box> is the answer box. The function initializeUAC stores the mp3 URL in the variable curl, and sets the onKeyDown event handler of the answer box to uacKeyHandler(). Therefore, an alternative and fully equivalent way to add the UAC functionality is the following:

<script type="text/javascript" src="soundmanager2.js">
<script type="text/javascript" src="uacaptcha.js">
</script>
<script type="text/javascript">
curl = <mp3-url>;
<answer-box>.onkeydown = uacKeyHandler();
</script>

For some providers of Audio CAPTCHAs, such as reCAPTCHA, the URL of the sound file is not available when the page first loads. To handle this situation, the function initializeUAC2 provides an alternative:

<script type="text/javascript" src="soundmanager2.js">
<script type="text/javascript" src="uacaptcha.js">
</script>
<script type="text/javascript">
initializeUAC2(<answer-box>);
function getCURL() {
  return <mp3-url>;
}
</script>

The function getCURL() must be written so that it returns the mp3 URL when needed. If getCURL() returns null, this should indicate that the CAPTCHA is not in Audio mode. In this case, the keys to control the audio playback are ignored. (Note that getCURL() is called every time one of the feedback control buttons is pressed, to check whether the captcha URL has unexpectedly changed.)

Here is a demonstration of initializeUAC2() using reCAPTCHA:

<script type="text/javascript" src="soundmanager2.js">
<script type="text/javascript" src="uacaptcha.js">
</script>
<script type="text/javascript">
initializeUAC2(document.getElementById('recaptcha_response_field'));
function getCURL() {
  if(Recaptcha.type == "image")
    return null;
  cant_hear_link = Recaptcha.widget.getElementsByClassName('recaptcha_audio_cant_hear_link')[1];
  return cant_hear_link.href;
}
</script>

By default, the reCAPTCHA audio will automatically start playing as soon as the user switches to audio mode. Since SoundManager2 has no control over the audio player inside the reCAPTCHA widget, if the user presses, say, a period, this will cause a second copy of the same sound to start playing in parallel. To avoid this, it is handy to set the audio player inside the reCAPTCHA widget to not automatically start. The following trick accomplishes this.

Add the following script to the main page:

<script type="text/javascript">
var audiobutton = document.getElementById('recaptcha_switch_audio_btn');
audiobutton.href="javascript:Recaptcha.switch_type('audio');Recaptcha._add_script('stopaudio.js');";
</script>

Then put the following in a file named stopaudio.js:

// stop the default player from starting, by deleting it
var rdiv = document.getElementById('recaptcha_image');
rdiv.removeChild(rdiv.childNodes[0]);

This is demonstrated at our reCAPTCHA UAC demo.

Warning: the above code depends on the layout of the reCAPTCHA widget, which may change unexpectedly. It's probably a good idea to check up on a modified reCAPTCHA every few weeks to make sure that it is still functional.

Back to the main UAC page