mollom-captcha-audio.tpl.php 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <?php
  2. /**
  3. * @file
  4. * Provide the HTML output for the audio CAPTCHA playback.
  5. *
  6. * Available variables:
  7. * - $captcha_url: The CAPTCHA audio to present.
  8. * - $flash_fallback_player: The URL to the Flash plugin to use as a fallback
  9. * player when HTML5 audio is unsupported for MP3.
  10. *
  11. * Assumptions:
  12. * - SWFObject is already included if it is available.
  13. *
  14. * @see http://www.html5rocks.com/en/tutorials/audio/quick/
  15. */
  16. $flash_url = url($flash_fallback_player, array(
  17. 'query' => array('url' => $captcha_url),
  18. 'external' => TRUE,
  19. ));
  20. $switch_verify = t('Switch to image verification.');
  21. $instructions = t('Enter only the first letter of each word you hear. If you are having trouble listening in your browser, you can <a href="@captcha-url" id="mollom_captcha_download" class="swfNext-mollom_captcha_verify">download the audio</a> to listen on your device.', array(
  22. '@captcha-url' => $captcha_url,
  23. ));
  24. $unsupported = t('Your system does not support our audio playback verification. Please <a href="@captcha-url" id="mollom_captcha_download" class="swfNext-mollom_captcha_verify">download this verification</a> to listen on your device.', array(
  25. '@captcha-url' => $captcha_url,
  26. ));
  27. $refresh_alt = t('Refresh');
  28. $refresh_image_output = theme('image', array(
  29. 'path' => drupal_get_path('module', 'mollom') . '/images/refresh.png',
  30. 'alt' => $refresh_alt,
  31. 'getsize' => FALSE,
  32. ));
  33. ?>
  34. <script type="text/javascript">
  35. function embedFallbackPlayer() {
  36. var embedDiv = document.getElementById("mollom_captcha_fallback_player");
  37. var audioDiv = document.getElementById("mollom_captcha_audio");
  38. var unsupportedDiv = document.getElementById("mollom_captcha_unsupported");
  39. var movie = '<?php print $flash_url; ?>';
  40. function embedComplete(e) {
  41. if (e.success) {
  42. e.ref.focus();
  43. } else {
  44. jQuery(unsupportedDiv).removeClass('element-hidden');
  45. }
  46. }
  47. var flashvars = {},
  48. params = {
  49. wmode: "opaque"
  50. },
  51. attributes = {
  52. "class": "swfPrev-mollom_captcha_download swfNext-mollom_captcha_verify mollom_captcha_flash_player",
  53. },
  54. playerWidth = 110,
  55. playerHeight = 50;
  56. if (typeof swfobject !== 'undefined') {
  57. swfobject.embedSWF(movie, embedDiv, playerWidth, playerHeight, "10.0", null, flashvars, params, attributes, embedComplete);
  58. } else {
  59. var embed = '<object id="mollom_captcha_fallback_player" name="mollom_captcha_fallback_player" ';
  60. embed += 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ';
  61. embed += 'type="application/x-shockwave-flash" ';
  62. embed += 'data="' + movie + '" '
  63. for (var attr in attributes) {
  64. embed += attr + '="' + attributes[attr] + '" ';
  65. }
  66. embed += 'width="' + playerWidth + 'px" height="' + playerHeight + 'px">';
  67. embed += '<param name="movie" value="' + movie + '" />';
  68. for (var param in params) {
  69. embed += '<param name="' + param + '" value="' + params[param] + '" />';
  70. }
  71. var flashVarsArray = [];
  72. for(var varname in flashvars) {
  73. flashVarsArray.append(varname + '=' + encodeURI(flashvars[varname]));
  74. }
  75. flashVarsString = flashVarsArray.join('&');
  76. if (flashVarsString.length > 0) {
  77. embed += '<param name="flashVars" value="' + flashVarsString + '" />';
  78. }
  79. embed += '<embed src="' + movie + '" width="' + playerWidth + '" height="' + playerHeight + '" ';
  80. for (var attr in attributes) {
  81. embed += attr + '="' + attributes[attr] + '" ';
  82. }
  83. for (var param in params) {
  84. embed += param + '="' + params[param] + '" ';
  85. }
  86. if (flashVarsString.length > 0) {
  87. embed += 'flashVars="' + flashVarsString + '"';
  88. }
  89. embed += '/>';
  90. embed += '</object>';
  91. jQuery(embedDiv).replaceWith(embed);
  92. jQuery("#mollom_captcha_fallback_player").focus();
  93. }
  94. jQuery(audioDiv).hide();
  95. }
  96. </script>
  97. <span class="mollom-captcha-container">
  98. <a href="javascript:void(0);" class="mollom-refresh-captcha mollom-refresh-audio"><?php print $refresh_image_output; ?></a>
  99. <span class="mollom-captcha-content mollom-audio-captcha">
  100. <span class="mollom-audio-catcha-instructions"><?php print $instructions; ?></span>
  101. <!--- HTML5 Audio playback -->
  102. <audio id="mollom_captcha_audio" controls tabindex="0">
  103. <source src="<?php print $captcha_url; ?>" type="audio/mpeg" />
  104. <!-- Displays if HTML5 audio is unsupported and JavaScript player embed is unsupported -->
  105. <p><?php print $unsupported; ?></p>
  106. </audio>
  107. <!-- Fallback for browsers not supporting HTML5 audio or not MP3 format -->
  108. <span id="mollom_captcha_fallback">
  109. <span id="mollom_captcha_fallback_player"></span>
  110. <script>
  111. var audioTest = document.createElement('audio');
  112. if (!audioTest.canPlayType || !audioTest.canPlayType('audio/mpeg')) {
  113. embedFallbackPlayer();
  114. }
  115. </script>
  116. </span>
  117. <!-- Text to show when neither HTML5 audio or SWFs are supported -->
  118. <span id="mollom_captcha_unsupported" class="element-hidden">
  119. <p><?php print $unsupported; ?></p>
  120. </span>
  121. <span class="mollom-audio-captcha-switch"><a href="#" class="mollom-switch-captcha mollom-image-captcha swfPrev-mollom_captcha_download" id="mollom_captcha_verify"><?php print $switch_verify; ?></a></span>
  122. </span>
  123. </span>