Thursday, March 24, 2011

jQuery Sounds IE7 / IE8 Issue with Flash ExternalInterface

I would like to add sound alerts to a web application. I believe that Flash is the best way to do this to support all major browsers, ie. IE, Firefox, Chrome, Safari. Chrome does not seem to work with the non-flash sound solutions.

I have been using jQuery and would like to use the jQuery Sound plug-in. An example is shown at jQuery Sound Plug-in Demo, however I can not get this working in IE7 and IE8 Beta.

I am getting a JavaScript issue within the section of code below.

load: function(evt, url) {
 var self = $(this);
 var id = self.data("sound.settings").id;
 var movie = self.data("sound.get_movie")(id);
 movie.load(url);
 self.data("sound.isPlaying", true);
},

The plug-in is also using the following function to get the Flash movie which looks fine for IE browsers.

var get_movie = function(id) {
 var movie = null;
 if ($.browser.msie) {
  movie = window[id];
 } else {
  movie = document[id];
 }
 return movie;
};

Is there something I am missing here so this can work in IE7 and IE8 Beta? Any help would be greatly appreciated.

From stackoverflow
  • The issue is fixed when the following code is changed:

        if ($.browser.msie) {
            var html = '<object id="' + settings.id + '" data="' + settings.swf + '" type="application/x-shockwave-flash" width="0" height="0">';
            html += ' <param name="movie" value="' + settings.swf + '"/>';
            html += ' <param name="AllowScriptAccess" value="always"/>';
            html += ' <param name="quality" value="high"/>';
            html += ' <param name="wmode" value="transparent"/>';
            html += ' <!-- -->';
            html += ' </object>';
        } else {
            var html = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"';
            html += ' codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" width="0" height="0"';
            html += ' id="' + settings.id + '"';
            html += ' align="middle">';
            html += '<param name="movie" value="' + settings.swf + '" />';
            html += '<param name="quality" value="' + settings.quality + '" />';
            html += '<param name="FlashVars" value="id=' + settings.id + '"/>';
            html += '<param name="allowScriptAccess" value="always"/>';
            html += '<embed src="' + settings.swf + '" FlashVars="id='+ settings.id +'"';
            html += ' allowScriptAccess="always" quality="' + settings.quality + '" bgcolor="#ffffff" width="0" height="0"';
            html += ' name="' + settings.id + '" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
            html += '</object>';
        }
    
    ...
    
    
    var get_movie = function(id) {
        var movie = null;
        if ($.browser.msie) {
         //movie = window[id];
         movie = document.getElementById(id);
        } else {
         movie = document[id];
        }
        return movie;
    };
    

    Source Referenced: SoundManager 2

    Edy Gomolyako : I want to add that IE requires for element both: 'id' attribute and 'data' attribute.

    0 comments:

    Post a Comment