Fix audio player in IE7, IE9 and Opera
authorstan <stan@735d13b6-9817-0410-8766-e36946ffe9aa>
Tue, 12 Feb 2013 23:19:39 +0000 (23:19 +0000)
committerstan <stan@735d13b6-9817-0410-8766-e36946ffe9aa>
Tue, 12 Feb 2013 23:19:39 +0000 (23:19 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Extensions/sr_freecap/trunk@71162 735d13b6-9817-0410-8766-e36946ffe9aa

ChangeLog
Resources/Public/JavaScript/freeCap.js

index af184f5..2888add 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,6 +1,7 @@
 2013-02-12  Stanislas Rolland  <typo3@sjbr.ca>
 
        * Cleanup audio file rendering
+       * Fix audio player in IE7, IE9 and Opera
 
 2013-02-11  Stanislas Rolland  <typo3@sjbr.ca>
 
index 90e9853..9cbd960 100644 (file)
@@ -1,7 +1,7 @@
 /***************************************************************
 *  Copyright notice
 *
-*  (c) 2007-2012 Stanislas Rolland <typo3(arobas)sjbr.ca>
+*  (c) 2007-2013 Stanislas Rolland <typo3(arobas)sjbr.ca>
 *  All rights reserved
 *
 *  This script is part of the TYPO3 project. The TYPO3 project is
  */
 (function () {
        SrFreecap = {
+
                /*
                 * Loads a new freeCap image
                 *
-                * @param       string          id: identifier used to uniiquely identify the image
-                *
-                * @return      void
+                * @param string id: identifier used to uniiquely identify the image
+                * @param string noImageMessage: message to be displayed if the image element cannot be found
+                * @return void
                 */
                newImage: function (id, noImageMessage) {
                        if (document.getElementById) {
                /*
                 * Plays the audio captcha
                 *
-                * @param       string          id: identifier used to uniquely identify the wav file
-                * @param       string          wavURL: url of the wave file generating script
-                *
-                * @return      void
+                * @param string id: identifier used to uniquely identify the wav file
+                * @param string wavURL: url of the wave file generating script
+                * @param string noPlayMessage: message to be displayed if the audio file cannot be rendered
+                * @return void
                 *
                 * Note: In order for this to work with IE8, [SYS][cookieDomain] must be set using the TYPO3 Install Tool
                 */
                playCaptcha: function (id, wavURL, noPlayMessage) {
                        if (document.getElementById) {
                                var theAudio = document.getElementById('tx_srfreecap_captcha_playAudio_' + id);
-                               var url = wavURL + '&nocache=' + Math.random();
+                               var url = wavURL + '&set=' + Math.round(Math.random()*100000);
                                while (theAudio.firstChild) {
                                        theAudio.removeChild(theAudio.firstChild);
                                }
                                var audioElement = document.createElement('audio');
-                               if (audioElement.canPlayType && (audioElement.canPlayType('audio/x-wav') === 'maybe' || audioElement.canPlayType('audio/x-wav') === 'probably')) {
+                               if (audioElement.canPlayType && (audioElement.canPlayType('audio/x-wav') === 'maybe' || audioElement.canPlayType('audio/x-wav') === 'probably') && !window.opera) {
                                        audioElement.setAttribute('id', 'tx_srfreecap_captcha_playAudio_audio' + id);
                                        audioElement.setAttribute('autoplay', 'autoplay');
-                                       var sourceElement = document.createElement('source');
-                                       sourceElement.setAttribute('type', 'audio/x-wav');
-                                       sourceElement.setAttribute('src', url);
-                                       audioElement.appendChild(sourceElement);
+                                       audioElement.setAttribute('src', url);
                                        theAudio.appendChild(audioElement);
                                } else {
-                                               // In IE, Windows Media Player should be the default player for audio WAVE
+                                       // In IE, use the default player for audio/x-wav, probably Windows Media Player
                                        var objectElement = document.createElement('object');
                                        objectElement.setAttribute('id', 'tx_srfreecap_captcha_playAudio_object' + id);
-                                       objectElement.setAttribute('type', 'audio/x-wav');
-                                       objectElement.setAttribute('data', url);
-                                       objectElement.style.height = 0;
-                                       objectElement.style.width = 0;
-                                       try {
-                                               objectElement.innerHTML = '<a href="' + url + '">' + (noPlayMessage ? noPlayMessage : 'Sorry, we cannot play the word of the image.') + '</a>';
-                                       } catch (e) {
-                                                       // IE8 does not allow any element other than param as child of object
-                                               objectElement.setAttribute('altHTML', '<a href="' + url + '">' + (noPlayMessage ? noPlayMessage : 'Sorry, we cannot play the word of the image.') + '</a>');
+                                       if (document.all && !document.querySelector && !document.addEventListener) {
+                                               // IE7 only
+                                               objectElement.setAttribute('type', 'audio/x-wav');
+                                               objectElement.setAttribute('filename', url);
+                                       } else {
+                                               objectElement.setAttribute('data', url);
                                        }
                                        theAudio.appendChild(objectElement);
+                                       objectElement.style.height = 0;
+                                       objectElement.style.width = 0;
                                        var parameters = {
-                                               src: url,
-                                               autoplay: true,
-                                               autoStart: true,
-                                               controller: false
+                                               autoplay: 'true',
+                                               autostart: 'true',
+                                               controller: 'false',
+                                               showcontrols: 'false'
                                        };
                                        for (var parameter in parameters) {
                                                if (parameters.hasOwnProperty(parameter)) {
                                                        var paramElement = document.createElement('param');
-                                                       paramElement.setAttribute('value', parameters[parameter]);
                                                        paramElement.setAttribute('name', parameter);
+                                                       paramElement.setAttribute('value', parameters[parameter]);
                                                        paramElement = objectElement.appendChild(paramElement);
                                                }
                                        }
+                                       if (document.addEventListener) {
+                                               // In IE9 and Opera
+                                               objectElement.innerHTML = '<a style="display:inline-block; margin-left: 5px; width: 200px;" href="' + url + '">' + (noPlayMessage ? noPlayMessage : 'Sorry, we cannot play the word of the image.') + '</a>';
+                                       } else {
+                                               objectElement.altHtml = '<a href="' + url + '">' + (noPlayMessage ? noPlayMessage : 'Sorry, we cannot play the word of the image.') + '</a>';
+                                       }
                                }
                        } else {
                                alert(noPlayMessage ? noPlayMessage : 'Sorry, we cannot play the word of the image.');