Silverlight: There’s more to it than "just" video

.NET, Silverlight, Technical stuff
See comments

As I was listening today to the new Foo Fighter CDs I bought a few days ago, I realized that I love one of the tracks: “But, Honestly” (on “Echoes, Silence, Patience & Grace”). In fact, I especially like the second part of the song, with an incredible progression in energy, Dave Grohl‘s great voice and guitar and the bass and drums bringing the whole crescendo to an harmonic explosion (I feel like a poet today…).

It is so good that I thought “I should really mention this on my blog”, and I even have an excuse: I can share it with my readers, in MP3 format, using Silverlight and the MediaElement!

Harmonic explosion (But, Honestly by Foo Fighters)
Harmonic explosion (But, Honestly by Foo Fighters)
  • I opened the MP3 in Audacity (an amazing FREE sound editor). Extract the part you want to export, and export it as a WAV file (you can save to MP3 directly in Audacity, but you need to set the location of the encoding engine).
  • Open the extracted section in Audacity again, add a fade-in and fade-out effect.
  • Convert the WAV to MP3 (I use the dbPowerAmp music converter for this kind of things).
  • Create a Silverlight 1.0 project.
  • In the same folder as Page.xaml, create a subdirectory “Sound”.
  • Copy the MP3 file you created in the “Sound” folder.
  • Open the file “Page.xaml”.
  • We will use the Silverlight engine in a totally invisible way, so set the main Canvas Width and Height to 0.
  • Delete the “Background” attribute; this sets the background color to transparent.
  • Add the following code to the main Canvas:
<MediaElement
  Source="Sound/Foo Fighters But, Honestly (extract).mp3"
  AutoPlay="False"
  Height="0"
  Width="0"
  IsHitTestable="False"
  x:Name="Media"/>

  • Open the file “Page.xaml.js” and modify the code in the “prototype” definition to look like this:
handleLoad: function(control, userContext, rootElement) 
{
  this._media = control.content.findName("Media");
  this._media.addEventListener("MediaEnded",
    Silverlight.createDelegate(this, this.handleMediaEnded));
},

_media: null,
_isMediaPlaying: false,

// Sample event handler
handlePlayPauseLinkClick: function() 
{
  if (!this._media)
  {
    return;
  }
  if (this._isMediaPlaying)
  {
    this._media.Pause();
    this._isMediaPlaying = false;
    document.getElementById("PlayPauseLink").innerHTML = "Play";
  }
  else
  {
    this._media.Play();
    this._isMediaPlaying = true;
    document.getElementById("PlayPauseLink").innerHTML = "Pause";
  }
},

handleMediaEnded: function(sender, eventArgs)
{
  sender.Stop();
  this._isMediaPlaying = false;
  document.getElementById("PlayPauseLink").innerHTML = "Play";
}

  • Finally, open the file “Default.html”. Change the CSS class “silverlightHost” like this:
.silverlightHost {
    height: 0px;
    width: 0px;
}

  • and change the HTML code to look like this:
<a href="https://galasoft.ch/gslb.nojs.html"
   onclick="scene.handlePlayPauseLinkClick();return false;"
   id="PlayPauseLink">Play</a>

<div id="SilverlightControlHost" class="silverlightHost">
    <script type="text/javascript">
        var scene = createSilverlight();
    </script>
</div>

Easy, isn’t it? Now I just hope that Dave won’t sue me for publishing this…

Previous entry | Next blog entry

Comments for Silverlight: There&#8217;s more to it than &quot;just&quot; video