One of the advantages that ecards have over traditional vanilla paper greeting cards, is a true multimedia experience. The combination of design, message, music, animation and interactivity enables us to express ourselves in a more meaningful manner.
Over the last couple of months, we’ve been trying to delve deeper into the music components & the technologies that allow us to deliver music to the user’s browser in a seamless manner. Our users are based across the globe, and access the website with varying Internet speeds using a multitude of browsers, operating systems, plug-ins etc.
We came up with a set of conditions that we wanted to fulfill in any solution we finally arrived at. Some of the things we had in mind were:
- Music files are already large in size by themselves. We wanted a small player to deliver music fast.
- Users should not be asked for a compatible download/ installation of any software.
- Cross OS, Cross Browser, Cross plug-in Music Player.
- The player should play at least .mid, .wav & .mp3 file formats
- Preferably open source under any license.
- HTML/ JavaScript based (fully client side).
As we researched we found that most so-called cross browser players were flash based. The problem was two fold.
- We did not want to load the swf as it added with its size a roundtrip to the server, which was expensive.
- We did not assume that all our users would be using flash. We also offer Animated cards and Postcards, which are not dependent on Flash for such users.
Some like ‘JQuery Sound’ came close but needed a particular player for a particular type of content, which was not compatible with all the browsers/ OS combinations. They used the EMBED and/ or OBJECT tag to achieve the same. The major problem we noticed here while checking on different browsers/ OS combinations was that it did not always work. It was due to the fact that not all browsers had all plug-ins and hence it asked for the user to install plug-ins which were not present.
While pondering over all these we pinpointed that…
- Our users ran different OS.
- All these OS had different browsers with different versions on them.
- All these in turn installed plug-ins to play a particular kind of media.
Therefore more than a OS/ Browser combination our focus shifted to a OS/ Browser/ Plug-in perspective.
Browser/ OS Detection
Browser detection gets a bit complicated with the fact that few browsers spoof it, most allow you to impersonate other browsers. Getting the right browser would mean using navigator.userAgent with browser specific tricks or the newer navigator.vendor. For this Quirksmode has a great browser detection script ready for download.
Plug-in Detection
All browsers have their various plug-in-detection capabilities. Netscape’s navigator.plug-ins array which is empty in Windows, Internet Explorer. IE on windows uses VBScript to detect plug-in but certain versions of IE on the Mac won’t agree. Until version 5, IE on the Mac also wasn’t able to detect plug-ins. As of version 5, navigator.plug-ins array was implemented.
With the myriad of players and plug-ins in the world we started to search what most of our users had. For sure we or no one else could have covered all of them. Finally we pinpointed on QuickTime, RealPlayer, Flash and Media Player. All of them had cross reach, were stable and widely used. There are a variety of plug-in detection scripts and they were all checked across more than 25 browsers on 4 operating systems containing different mix and match of the plug-ins to provide our users the best possible user experience. The most reliable of these was a plug-in detection script offered by apple.
We came up with our own version of the Music Player that checks the user’s browser and plays the required file using whichever plug-in is installed on the user’s device.
The pseudo code is as follows…
Separate extension from filename
Detect browser
For all players plug-in which can play extension
If Browser (IE on windows)
Detect using VBScript
Else
Detect using navigator.plug-ins
End If
If plug-in detected Play and exit loop
End for
If no plug-in found still leave a mime type specific tag so that the browser may attempt to play using some other player it might have.
This solution allowed us to deliver a seamless music experience addressing most of our concerns and helped us reduce our code size by more than 78% from our existing version.
We now use a flash based music player for all our flash cards, and our Javascript based music player for all our postcards & animated cards. You can check out live examples here & here.
