Using Silverlight Streaming by Windows Live In Your Blog Posts and Websites

Last week I posted about my interview with Angus Logan and Danny Thorpe and included the whole interview in the blog post by using Silverlight Streaming by Windows Live. But just what did I need to do to get that all working? Here I will show you.

Encoding with Expression Encoder

For this, you will need to install Expression Encoder to encode the mp3 and apply all the cool touches to it. For this, I didn't want to use any of the built in players that come with Encoder because they were all intended for videos, so I wanted one that was specifically for audio, so one quick search later took me to the Silverlight Audio Player. Download the most recent source code, and in the zip file you download will be a folder called "SilverlightAudioPlayer"; copy that folder into your %Program Files%\Microsoft Expression\Encoder 1.0\Templates\en\ folder (or whichever language you have installed). Now we can begin.

Import your audio file into the open job (File > Import...), and on the right hand side in the settings section, we need to make sure that the final file size is less than 22mb, so adjust it accordingly:

Next we need to set what the output is going to be like, so go to the output section:
 
You'll see that the template selected is the AudioGrey one, this is the audio player we added to our template folder earlier.

In my interview, you will note that I added chapter points to the areas specified in the blog entry, to do this we go to the Medadata section. At the specific points of the audio, add a marker and that will be your chapter point:
 

Once the chapter points are all done we and you're happy with everything else, you can then encode the project by simply clicking Encode.

Packaging your project for Silverlight Streaming

After the encoding has finished, go to the output folder, and create a new xml file and call it manifest.xml. Now this is the part that I had to spend some time looking up, as I could find no information on dev.live.com about the manifest file and what needs to go in it, in the end I found something on Tim Sneath's blog about it and went from there. So how should this xml file look? Like this:

<SilverlightApp>
   <loadFunction>StartWithParent</loadFunction>
   <jsOrder>
      <js>MicrosoftAjax.js</js>
      <js>PreviewMedia.js</js>
      <js>EmePlayer.js</js>
      <js>player.js</js>
      <js>startPlayer.js</js>
   </jsOrder>
</SilverlightApp>

To get the information that goes in here we need to look at the html file that got created when we encoded using Encoder and each javascript file needs putting in as a <js> element in the xml file, making sure you put them in the correct order. The <loadFunction> tag uses the function that's called to load the Silverlight app:

Now for my player, this is where I deviated from what's in the html file, I didn't use StartPlayer_0 as that wasn't working for me that great and went with most of the others which uses StartWithParent. To find whether I could use StartWithParent, I went into StartPlayer.js; whilst in there, I also changed the app to not autoplay by setting the autoPlay property to be false:

So my final manifest.xml file looked like this:

<SilverlightApp>
   <loadFunction>StartWithParent</loadFunction>
   <jsOrder>
      <js>MicrosoftAjax.js</js>
      <js>Silverlight.js</js>
      <js>BasePlayer.js</js>
      <js>PlayerStrings.js</js>
      <js>player.js</js>
      <js>StartPlayer.js</js>
   </jsOrder>
</SilverlightApp>

Now we come to actually package the project, in the output folder select all the files that aren't *.csproj files or *.html files:
 

Add these files to a zip file (Right click > Send To... > Compressed zip folder), and then we head on to http://silverlight.live.com/ to upload the project. If you haven't created an account on the Silverlight Streaming site, you will need to do that. If you have an account, then click on Manage Applications and then Upload Silverlight Application; give the application a name, and point to the zip file we created, and simply upload that.

When that has uploaded, you will then get a page that shows you how you can put the application into your website:

For our site though, this isn't a possibility, and it might not be for you, so this is where we can use the iFrame link:

<iframe src=http://silverlight.services.live.com/invoke/<user_id>/<app_name>/iframe.html frameborder="0" width="415" scrolling="no" height="50"></iframe>. The user_id can be got from going to the Manage Account page, it's the shorted of the two, and the app_name is whatever you gave the name when you uploaded.

And that's it. Put that iframe code in your page and you're now streaming your Silverlight App right on your website.

SL