Preparing your Flash website for IE7

(This post contains more web-geekery; if you’re unfamiliar with things like HTML and JavaScript, you’ll want to get your webmaster or a web-savvy friend to help you out.)

I was messing around with my website a few days ago when I noticed something strange about the Flash audio player I was using. Specifically I had to click it twice to make it play anything. Upon further inspection, I noticed a new tooltip message popped up when I put the mouse over the player (see the image at right).

What happened is this: Microsoft (who make the Internet Explorer browser) is changing the way Flash and other embedded media works in web pages. Visitors that upgrade to the newest versions of IE will be required to activate embedded media by clicking on it before they can interact with it. The downside of this, of course, is that your visitors probably won’t know this — they might just assume your player is broken, and move on.

It gets worse: this change might be affecting your website right now, because it’s also included in Windows updates for IE6!

Fortunately, there’s an relatively easy fix. Embedded media such as Flash, Quicktime and other files can be written into the page with JavaScript.

Here’s how I fixed my own Flash player. First, I took all the HTML code for the jukebox and placed it inside JavaScript document.write() statements, like so:

document.write('<object type="application/x-shockwave-flash" data="jukebox.swf">');
document.write('<param name="movie" value="jukebox4.swf" />');
document.write('<param name="quality" value="high" />');
document.write('Don\'t have Flash? Try the <a href="/music/">Downloads section &raquo;</a>');
document.write('</object>');

I copied these lines into a separate file called jukebox.js and uploaded it to my web server.

Then, at the spot where the jukebox HTML used to be, I inserted the following line:

<script src="jukebox.js" type="text/javascript"></script>

Here’s why this works: by moving the jukebox HTML to an external JavaScript file, the jukebox is no longer considered to be “embedded” in the page. So IE allows visitors to use it without requiring the extra click.

You’ll probably have to do this for any embedded audio or video content. Fortunately, the jukebox is the only piece of Flash I use on my website. For those artists with all-Flash sites — well, you’ve got your work cut out for you!