Tim Acheson's Blog : Just launched, a website for videos showing people trying the Lips karaoke/singing game on Xbox 360!

Just launched, a website for videos showing people trying the Lips karaoke/singing game on Xbox 360!

I've just finished building a nice little website for Microsoft. It's in production now, ready for soft-launch:-

http://xboxvideos.musicradio.com/videos

www.singwithlips.co.uk

It's a microsite for some fun that the Xbox folks are having on tour in the UK with Lips, the karaoke/singing type game on Xbox 360. The new and updated version of the game has just been launched -- Lips: Number One Hits.

Soon after launch, the website is likely to fill up with hundreds if not thousands of videos of the public trying out the game! So be sure to take a look, it'll be fun. ;)

As a karaoke/singing game it's not usually my cup of tea, but a best-seller nonetheless.

The website is fronted by Lily Allen -- pop star, singer, and all round hot babe -- and congrats to her for another Number 1 hit, and on winning best track at the Q Awards today!

Enjoy!

26 October 2009

Share the love:

Comments: 10

Add Comment

Tim Acheson (26 Oct 09, 19:18)

Technology spotlight

The public website and internal management systems are powered by Microsoft’s standard web platform, including the technologies listed above, and following a typical n-tier architecture pattern. Video steaming is delivered by Windows Media Services, with the multimedia content surfaced on a simple Silverlight client.

ASP.NET 2 web application
Silverlight 2 video player app
IIS 7 web server platform, distributed across a number of machines in different locations
SQL Server 2008 database layer with failover partner
Windows Media Services streaming infrastructure

The Silverlight plug-in offers some extremely powerful capabilities for online media player implementation, e.g. the new Smooth Streaming feature, which facilitates complete control over stream quality by the developer and even the user. (An obvious smart use for this feature is to seamlessly scale-up video quality in full-screen mode, although in this project the video content provided wasn’t HD and SS wasn’t implemented.)

One minor but very cool Silverlight feature I took advantage of in this project is the ability to fully customise the packaging and deployment of the Silverlight app. This enabled me to get the original XAP file size for the video player down to about 5 kb (a negligible footprint). I achieved this in the Visual Studio 2008 build wizard, simply by hooking-in a third-party open-source utility called ReXapper which optimises the packaging of a XAP file.

Tim Acheson (26 Oct 09, 19:19)

XAP (Silverlight) vs SWF (Flash)

A Silverlight app is typically deployed as an XAP file. This is roughly equivalent to the SWF file that packages a Flash app; but Silverlight evolves the concept of packaging to a completely different level. Whereas SWF is a proprietary, closed, fixed, inflexible format, an XAP file is in fact just a Zip file (like a JAR file) containing an XML file to configure the app (XAML) and a DLL compiled for high-performance at runtime. (Rename videoplayer.xap to videoplayer.zip and you’ll see.) XAP is an extremely flexible specification. In fact, you don’t even need a file to deploy Silverlight; you can create a Silverlight app using pure JavaScript! So there are no limits -- you’re not restricted by what goes into the XAP file that gets deployed. Also, you’re not tied-down to a proprietary format or expensive development tools -- though I’d never give up my VS and Expression they’re such a joy to use!

This is a good case study as a classic example of an agency-style microsite project delivered within an Agile product development environment, combining TDD and BDD testing philosophies. (The project management style was Scrum with aspects of Kanban.) It’s also provides a typical and informative example of rapid web development for a successful marketing campaign using standard, mainstream, off-the-shelf technology.

Tim Acheson (28 Oct 09, 15:28)

I heard about somebody who was especially interested in the markup on project, e.g. validation, accessibility, etc. I welcome the interest! Perhaps the following observations will be educational.

Thumbnails page:
http://xboxvideos.musicradio.com/videos

Valid HTML 4.01 transitional, zero errors, zero warnings:
confirmed by W3C Markup Validation Service

Video page (e.g.):
http://xboxvideos.musicradio.com/Video/?id=1278

Valid HTML 4.01 transitional, zero errors, zero warnings:
confirmed by W3C Markup Validation Service

I can't take credit for the all HTML though. I did the hardcore dev work and the HTML for the dynamic parts, including these two pages.

The HTML is flawless -- much of it generated through simple templates incorporating standard ASP.NET controls, along with some hand-coded elements within custom ASP.NET user controls. Accessibility is good, following key WAI guidelines. Performance and speed of the web app is also particularly good, with pages served nice and fast.

This Lips web app is a definite win, delivering above and beyond. Importantly, it was delivered quickly and easily thanks to the rapid development capabilities of .NET -- well, well within the timeline.

Watch this space for a completely different project coming soon -- a much more long-term and high-profile product...

Enjoy!

Tim Acheson (29 Oct 09, 17:50)

A selection of my favourite Lips videos so far.

How to sing "I'll take my clothes off" with style, and other useful kareoke examples.

Not a bad audition!
http://bit.ly/3yeXW8

Why do some people laugh when they say "I hope people die"? (The psychology of karaoke
http://bit.ly/3yeXW8

X-factor audition
http://bit.ly/4h42sg

Pop stars often wear sunglasses
http://bit.ly/3HuoDe

Halloween
http://bit.ly/p2wvC

A true pro dances when they sing
http://bit.ly/2CYVbS

The more, the merrier
http://bit.ly/3V34Q8

A true pro puts on an American accent
http://bit.ly/22J4Oc

The dance is as important as the song
http://bit.ly/3fRgGO

Two generations of singers in one video
http://bit.ly/3ImJIP

Don't sing too loudly
http://bit.ly/48CECs

A black leather jacket is the hallmark of a rock star
http://bit.ly/L9Rcw

The chorus must be louder than the verses
http://bit.ly/1QcEkZ

Mastering vibrato
http://bit.ly/4liFZj

Karaoke like a pro: flash a bit of flesh when singing "I'll take my clothes off..."
http://bit.ly/3VtVdk

Tim Acheson (26 Nov 09, 11:23)

Hundreds if not thousands of videos on there already.

Xbox Lips project wins prestigious award

The Xbox Lips website (details above) and campaign has just won an award, being announced yesterday as the winner of the AOP Commercial Partnership 2010.

Congratulations folks! ;)

Further info:

AOP Digital Publishing Awards 2010, announcement of winners (AOP)
AOP Digital Publishing Awards 2010, nominees (MediaWeek)
AOP Digital Publishing Awards 2010, shortlist (AOP)

As one person put it:

For those of you who haven’t heard I am delighted to announce that Global Radio won the AOP (Association of Online Publishers) Commercial Partnership 2010 for our Xbox lips campaign.

[Global] out-shone the competition from the likes of Bauer, The Times, The Mirror and Channel 4 to win the category with the Judges comments on our entry being:
"Superb execution of a user-generated strategy, utilising cross-media platforms to create a highly engaging viral campaign with extremely high quality outputs. This innovative campaign really hit the strategic objectives, and delivered fantastic results for the partnership."

Huge congratulations to Tim and all those who worked on the project.

Dev team

Tim Acheson - Developer (Silverlight, ASP.NET MVC, Entity Framework, Windows Media Services video streaming)
Steven Bensemann - DBA (SQL Server)
Ash Temple - Designer
Andy Newman HTML
Jennifer Thompson - Project Manager

Tim Acheson (07 Dec 09, 18:52)

A couple more favourites videos...

Funny Asian girls

Blonde woman with huge dangly earrings

Tim Acheson (10 Jan 10, 09:57)