Securimage PHP Captcha

Flash Audio HTML

Audio of the CAPTCHA code is output in MP3 format by default since version 2.0 and a Flash button is used to stream the audio to the user's browser seamlessly. The following HTML code can be customized to change the appearance and behavior of the button.

  <object type="application/x-shockwave-flash" data="/securimage/securimage_play.swf?audio=/securimage/securimage_play.php&amp;bgColor1=#fff&amp;bgColor2=#fff&amp;iconColor=#777&amp;borderWidth=1&amp;borderColor=#000" height="19" width="19">
    <param name="movie" value="/securimage/securimage_play.swf?audio=/securimage/securimage_play.php&amp;bgColor1=#fff&amp;bgColor2=#fff&amp;iconColor=#777&amp;borderWidth=1&amp;borderColor=#000" />
  </object>

The above HTML code is XHTML compliant and works in all browsers. For proper validation, the parameters passed to securimage_play.swf should be separated by ampersands using the HTML character code &

Flash Parameters:

• audio (required): URL of securimage_play.php. (i.e. http://yousite.com/securimage_play.swf)
• bgColor1: Background color for top half of button. Use hex colors in HTML format (#abcdef)
• bgColor2: Background color for bottom half of button.
• iconColor: Color of speaker icon on the button.
• borderWidth: Border width around the button in pixels (default 0).
• borderColor: Border color. Can use gradient colors as alternative.
• borderColor1: Top border gradient color.
• borderColor2: Bottom border gradient color.
• roundedCorner: Size of radius of rounded corners in pixels (default 0).

The most important parameter passed to Flash is the audio parameter. This tells the Flash file where to load the MP3 audio of the CAPTCHA from. It must point to the securimage_play.php script located on your web server otherwise the audio will fail to play or will play the wrong sound. All other parameters are optional.

The border width is 0 by default and no border is shown. Set borderWidth to 1 or greater to draw a border around the button. The borderColor parameter can be used to specify the color of the border. Alternatively, setting the borderColor1 & borderColor2 parameters will create a gradient from the top of the border to the bottom.

By default the button is rectangular but the corners can be rounded with the roundedCorner parameter. This specifies the radius in pixels of the rounded corner. A value of 1 has a subtle effect and a value of 10 will result in a near circular button for smaller sized buttons. The larger the size, the less effect smaller values have on the rounding.

Depending on the options used with the button and the background color of your webpage, it may be desirable to set the "bgcolor" attribute within the embed tag and in the object tag's param tag to better match the button with your page design.

Note: To ensure proper display and playback, each parameter must be specified in two locations. First in the <param> tag and again in the <object> tag. This is because Internet Explorer uses the value in the <param> tag and other browsers use the data parameter in the <object> tag. If the parameters are different in each set of tags, the button's appearance will be inconsistent across multiple web browsers. Be sure not to change the classid, codebase, or pluginspage attributes or the Flash may not display properly.

The source code for the Flash button can be found on the Download page.