More from the Main Category...

Let the Music Play

Tuesday, July 14th, 2009

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.

  1. We did not want to load the swf as it added with its size a roundtrip to the server, which was expensive.
  2. 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…

  1. Our users ran different OS.
  2. All these OS had different browsers with different versions on them.
  3. 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.

null

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.

Fast forward to April 2009; New Improvements

Wednesday, April 22nd, 2009

Back in September we launched 123Greetings 2.0. It was the end result of months of hard work and we were pretty happy with how it turned out. We received tons of positive feedback and although we weren’t able to incorporate all the features we wanted to, we were able to provide an excellent service that raised the bar to a whole new level.

Fast forward 6 months…. We’ve been looking at the various ways in which users interact with the website and have been making tweaks here and there, revamping sections, resolving issues etc. etc. all based on your feedback & interaction, allowing us to make the website more user friendly.

Yes, we have done all. Simplifying the card preview and creation process, integrating a dashboard to track, delete or edit a card that’s already sent, switching to cloud computing servers, redoing the entire UI from scratch, embracing Tim O’Reilly’s web 2.0 concepts (including implementing rating, relevancy and feedback system for cards), to name a few.

This version is a great improvement from the first, but it is by no means the end of the line, so please send us feedback! We’re looking forward to making the website even better with your help.

Hot Off the Press

Tuesday, August 5th, 2008

Welcome to the 123Greetings corporate blog. We’ve been pretty busy lately in the background. We made great strides launching APIs across major social networks, and enhancing the entire website. Now we’re launching our corporate blog. Thank you for all your emails and support for our applications.

Change is the only constant, and the only way forward. We at 123Greetings take pride in the emotional bonding we share with our users. So we feel obliged to let you know how we are changing with the tide of times, while keeping our core values intact. We are still the bridge to your loved ones, near and far. Now, we are present in networks where you connect with your friends and folks. This blog will be a platform for us to connect with our users at a level that is more personal, more heart-to-heart. You’ll find what’s in the pipeline, sneak peeks of our beta launches and our latest upgrades right here. Come join us and help us give better life to your expressions.