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

This afternoon we’re pushing another free auto-update to P4. Everyone on a capable web-host (about 96% of you) should see ProPhoto auto-update itself within 24 hours. This auto-update has some pretty cool new stuff, and I’ll be blogging more in the coming days about some of the details of the new features. Here’s a couple teasers:

Music for slideshows is back…

…and better than ever. We removed music support completely when we dropped all flash in our P4 upgrade, but now we’ve added back support for music in slideshows with a non-flash, HTML5 music player that also works on iPads and iPhones. ProPhoto will also automatically reconnect all of your old P3 MP3 files to your imported P4 galleries. More details in a future blog post.

Basic Pinterest support

This is only the beginning of our plans for Pinterest integration in the weeks and months to come, but we’ve started by adding simple, built-in Pinterest “Follow” and “Pin site image” options into the “Call to Action” option area. Check it out and let us know what you think.

Facebook “Like” button improvements

Improved Facebook integration was the most requested new feature in our recent poll, so we’ve already gotten started making improvements. We’ll have lots of details in future blog posts, but the basics of this update include:

New free starter design: Sunny California

We teamed up with Matt from LaLune Creative to add a new, free starter design, called Sunny California.

The new design looks great, and makes use of the new built-in Pinterest Call-to-action functionality. One of the reasons we added this new starter design was to replace “Late August” as the default starter for new users. Late August is great, and still a free, included starter design, but it’s not the easiest to edit and customize, so we thought it would be a win for usability to start out with a more straightforward starter design.

The gory details:

For the nerdy or incredibly inquisitive out there, here’s the standard run-down of just about everything that was changed since the last auto-update we pushed:

• 02/08/12 – restore music files from P3 slideshows that had music and were imported into P4
• add MP3 music functionality back to ProPhoto slideshows, without using flash for iPads and iPhones
• 02/07/12 – stagger automated emails warning users about dangerously out-of-date WordPress installations, so as not to overwhelm our support staff
• fix rare problem with certain Font Squirrel web kit zip uploads
• 02/06/12 – mobile masthead needs to obey modifications on certain page types
• 02/02/12 – Facebook “Like” and “Send” button integration in “Call to Action” areas, with new HTML5 API, allow commenting on FB while liking
• fix mobile menu WordPress “Page” links to use correct, pretty-permalink URL
• fix grids in sliding sidebar drawers not obeying font customization settings
• apply image drag/drop protection to large images in post excerpts
• fix bug in masthead slideshow modified on certain pages logic with header layouts where masthead and logo share same line
• 02/01/12 – revamp Facebook “Like” button in post footer area, switch to HTML5/JavaScriptSDK API, allow addition of “Send” button and commenting while liking
• 01/31/12 – prevent rare problem where multiple P3 galleries where being replaced by one gallery after import, caused by 32-bit integer overflow and very large Post IDs
• add new, free, default starter design “Sunny California” – props Matt Hudson and LaLune Creative
• add very basic Pinterest integration into Call-to-action area, follow button and pin-site-image functionality
• fix problem with Twitter tweet date-permalink URLs caused by new Twitter API
• prevent saving of designs with empty ID, caused by rare P3 data corruption issues
• ensure proper import of P3 non_design options that are now design options in P4, these were getting inadvertently stripped out during import
• don’t put private posts into grids
• sites on NSX.APLUS.NET nameservers are non-auto-upgrade-capable because they run a Zues-like NFS filesystem that can cause major failures on auto-updates