As I mentioned in my last post, in our most recent update we restored ProPhoto’s ability to play music for slideshow galleries.

ProPhoto3 was able to play music with slideshows, but when we were building P4, we completely ripped out the flash slideshow player and rebuilt it using pure HTML/CSS/JavaScript. Due in part to a time-crunch, some laziness, an ambivalence to music on websites in general, and some tricky technical issues, we never got around to restoring this functionality until last week.

How we did it

In rebuilding the music player, we wanted to avoid using Flash if at all possible and instead adopt the new HTML5 “audio” element. While this seems fairly straightforward, it turns out there are some problems to workaround. Namely:

• not all browsers support the HTML5 audio element (notably Internet Explorer)
• not all browsers can play MP3-format files through the HTML5 audio element because of copyright and licensing issues (notably Firefox, because of it’s open-source nature)

The good side of the force…

So, what we ended up doing is this: When we detect a slideshow with music, we dynamically load an HTML5 audio element for all browsers that can support it, and can play an MP3 through it. This includes iPads and iPhones. For these browsers and devices, the play/pause button on the ProPhoto slideshow is a basic toggle control to the invisible HTML5 element, and the entire audio player is 100% flash free.

And the dark side…

Alternatively, on browsers and devices that either don’t support HTML5 audio, or can’t play MP3s with it, we dynamically load a 1px by 1px invisible Flash movie off of the edge of the screen. Then, for these browsers, the play/pause button on the slideshow communicates silently via JavaScript with the invisible, off-stage 1×1 pixel flash movie, to start and stop and control the audio playback. So, for these browsers, we have added back in one small Flash element as a fallback when HTML5 audio playback is not possible. Just in case there’s any anti-flash purists out there who are upset by this fact, just be aware of these facts:

• Flash is loaded only when there is a slideshow with music present, and then only for browsers that don’t support HTML5 MP3 playback
• when Flash is loaded, it is loaded via JavaScript, so Google never sees anything except the pure HTML5 markup
• All modern browsers and devices (including iPhones, iPads) are never served Flash under any circumstances

Site-wide audio

There still remains one aspect of what ProPhoto3 could do that we have not yet restored, and that is overall site music — background music for your site itself.

At this point in time we are not certain that we will ever restore this functionality. It’s at least not coming back anytime soon. The reasons why we’re currently not planning to work on site-wide music are:

• background music for websites generally annoys the user and is considered poor usability
• background music significantly slows down page load times
• there is no simple way to keep music playing back continuously when the user navigates from page to page within your site
• there are several high-quality free WordPress plugins that can add general site background audio for those who still want it