Channel Register

Original URL: http://www.channelregister.co.uk/2008/01/09/silverlight_media_application_service/

Build a Silverlight media player

By Rob Blackwell
Published Wednesday 9th January 2008 20:32 GMT

Hands on Microsoft's deal (http://blogs.msdn.com/somasegar/archive/2008/01/07/2008-olympics-brought-to-you-by-silverlight.aspx) with US media giant NBC Universal to stream this summer's Olympic Games online using Silverlight represents a major demonstration of the potential of Microsoft's emerging browser-based runtime and streaming service.

In keeping with the news, and following on from my earlier introduction to Silverlight, I wanted to go one step further in building a Silverlight rich-media application and service. Here, I plan to show a more realistic application that demonstrates how designers and developers can work together using Silverlight.

Let's assume you work for a media company that has just signed a new artist. You're working with designers and marketing people to come up with new ways of promoting bands online. How can Silverlight help with this?

Design

Rather than work with Adobe's Photoshop, let's encourage the designer to use the new Microsoft Expression. All the Expression tools are available on a trial basis from the Microsoft Expression (http://www.microsoft.com/expression/) web site.

First we can preview and select from the available photos and artwork using Expression Media.

Silverlight images and artwork

Browse and select artwork in Expression Blend

Expression Design can be used to build any additional graphic assets. If we need to edit the audio, change its format or crop it, we can use Expression Encoder. To create the application, we'll use Expression Blend 2 December Preview and choose File > New > Create a new Silverlight 1.0 Site project. The new site includes a holding page, some XAML, JavaScript and the all-important Silverlight.js file.

Now we can add all the images that we want to use, along with the audio file (in WMA format) to the project. Images and media can be dragged onto the design surface and arranged to create the design.

Silverlight combined cover and images

Combined images and cover in Expression Blend

The basic design is nearly done, but we need to name the buttons playButton, stopButton and pauseButton to allow the developer to attach functionality.

Develop

Now, open the site from Visual Studio - I'm using Visual Studio 2008, but Visual Studio 2005 works as well - Just select File > Open Web Site.

Visual Studio shows the XAML that was generated by Blend. Whilst we could go in and start editing it directly - attaching event handlers for instance - I prefer to leave the XAML alone and do everything through script. The Page.xaml.js already defines a handleLoad function, which is the ideal place to set up the new functionality that we need to add.

The Silverlight control essentially extends the Document Object Model, so it's easy to find elements from within JavaScript:

this.playButton = rootElement.findName("playButton");
this.audio = rootElement.findName("audio");

Having found the play button, we can add an event handler:

this.playButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.play));

The event handler instructs the audio element to begin playing.

play: function(sender, eventArgs) 
        {
                this.audio.Play();
        },

We can continue to wire up the stopButton and pauseButton in a similar way.

The play and pause buttons are mutually exclusive - having paused, you need to press play to continue - so we must swap the visibility of these two buttons at the appropriate times.

        play: function(sender, eventArgs) 
        {
                this.playButton.Visibility = "Collapsed";
                this.pauseButton.Visibility = "Visible";
                this.audio.Play();
        },
        
        pause: function(sender, eventArgs) 
        {
                this.pauseButton.Visibility = "Collapsed";
                this.playButton.Visibility = "Visible";
                this.audio.Pause();
        },

We now have a very basic player that can be run from within Visual Studio - press F5 or select Debug > Start Debugging.

Refine the design

Back in Expression Blend, let's create a storyboard that we can use to animate the artist photographs.

A storyboard describes the changes to the properties of an object over time. Here we'll hide and show the photographs by changing their opacity. This should give us a kind of slide show effect, with photographs appearing to stack on top of each other.

Click the Plus button on the Objects and Timeline window to create a Storyboard; call it doSlideShow.

Now create key frames at the points that you want to show photographs - say every eight seconds.

The first key frame at 0:00.000 should have all the photographs set to opacity zero, or hidden.

Select each of the images in turn and mark the key frame where the image opacity should be switched to 100 per cent.

The buttons above the timeline (see picture below) view allow you to test the animation - Blend automatically interpolates the opacity between key frames. You'll need to experiment, adding more key frames until you get the effect you want. I suggest adding key frames with opacity zero, one second before switch on to give a sequenced effect.

Silverlight timeline

The animation timeline in Expression Blend

Back to the developer

Storyboards can be accessed and controlled just like media elements. The animation can be stopped and started accordingly.

this.doSlideShow = rootElement.findName("doSlideShow");
this.doSlideShow.Begin()

The full code for this project is available for download here (http://regmedia.co.uk/2008/01/09/player.zip). With a few changes, though, the application can easily be hosted in the Silverlight Streaming Service.

First remove the Default.html, Web.Config, Default.html.js and Silverlight.js files. The silverlight.js file is no longer required - this functionality is replaced by Silverlight Streaming.

Add some JavaScript that can be called when the application loads - add a file called Player.js as follows (the createDelegate snippet is just some glue that used to come from Silverlight.js).

Silverlight.createDelegate = function(instance, method) {
    return function() {
    return method.apply(instance, arguments);
    }
}

function onLoad(sender, context, source)
{
        var scene = new ChildOfMine.Page();
        scene.handleLoad(sender, context, source);
}

Then create a manifest.xml file that loads the XAML and calls the onLoad function defined above.

<SilverlightApp>
        <version>1.0</version> 
        <source>Page.xaml</source>
                <onLoad>onLoad</onLoad> 
        <jsOrder>
                <js>Page.xaml.js</js> 
                <js>Player.js</js> 
        </jsOrder>
</SilverlightApp>

You can now ZIP up the files and upload to Silverlight Streaming - a process described in detail in my earlier article (http://www.regdeveloper.co.uk/2007/11/05/get_started_with_silverlight/).

To see the application running using the Silverlight Streaming IFRAME invoker click on this link (http://silverlight.services.live.com/invoke/7630/ChildOfMine/iframe.html).

Wrapping it up

Traditionally graphic designers use a tool like Photoshop then "throw their design over the wall" to developers who are responsible for cutting the graphics into the application. The design very rarely works exactly as intended and considerable rework is required if the design changes. The combination of Expression and Visual Studio offers a way to close the gap between the two camps.®

Thanks to Helen Yousaf (http://www.helenyousaf.co.uk/) for permission to use her copyright material in this article.

Rob Blackwell is director of R&D for Active Web Solutions (http://www.aws.net) who worked with the Royal National Lifeboat Institute (RNLI) to build its award winning Sea Safety tracking system. You can keep up with Rob here (http://www.robblackwell.org.uk/).

© Copyright 2008