How to create a Karaoke machine in Silverlight

(Scroll to the bottom for the nice UI)

Figure: Karaoke machine UI done by a Developer :-)

Goal

1. We have 2 textboxes for artist and title
2. On click of “Start fun” button we call a web service to get the lyrics of the requested song
3. After that we scroll the lyrics in the textbox below

See how easy that is, with Silverlight!!!

System overview

Figure: Silverlight application calls the local web server, which calls the Lyrics web server

It’s that complicated, because cross domain access is blocked in Silverlight and the Lyrics web service doesn’t have a clientaccesspolicy.xml file

 

Prerequisites

“Silverlight SDK Toolkit”

Download “Silverlight SDK Toolkit” from MSDN
http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

Create a new Silverlight Application project

Figure: Create a Silverlight project

Figure: Yes, Add a ASP.NET web project

Create a reference to the external Lyrics web service

1. Right click on “SilverlightApplication.Web”
   
2. Click on “Add Web Reference”
3. Use this URL to reference the web service
   http://lyricwiki.org/server.php?wsdl
4. Click on Add Reference to finish
   

Create the web service proxy that calls the external Lyrics web service

1. Right click on “SilverlightApplication.Web”
2. Add New item
   
3. Choose “Web Service”
4. Name it “LyricService”
5. Enter a new method called GetSong

[WebMethod]
public org.lyricwiki.LyricsResult GetSong(string artist, string title)
{
    org.lyricwiki.LyricWiki lyricWiki = new org.lyricwiki.LyricWiki();
    return lyricWiki.getSong(artist, title);
}

Build your solution!

Create a reference to the web application proxy service

Create the layout (page.xaml)

<UserControl x:Class="SilverlightApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <StackPanel>
        <TextBlock  Text="Artist"></TextBlock>
        <TextBox x:Name="textBoxArtist" Width="200" Margin="5" Height="50"></TextBox>
        <TextBlock  x:Name="Artist" Text="Title"></TextBlock>
        <TextBox x:Name="textBoxTitle" Width="200" Margin="5" Height="50"></TextBox>
        <Button x:Name="buttonStart" Content="Start fun!" Margin="10" Width="100" Height="50" Click="buttonStart_Click"></Button>
        <TextBlock x:Name="textBlockResult" FontSize="20"  Text="nothing so far" Margin="10" Height="30" Width="700"></TextBlock>
    </StackPanel>
</UserControl>

Figure: XAML for the ugly Karaoke player

Code! Finally :-)

Use a timer to tick every 100 milliseconds and scroll through the lyrics

DispatcherTimer timer = new DispatcherTimer();  
timer.Interval = new TimeSpan(0, 0, 0, 0, 100);  
timer.Tick += new EventHandler(timer_Tick);

On each timer tick, we scroll the text

private void ScrollText()
{
  // Scroll 1 caret to the left, I know thats not nice :-)   but easy!
  textBlockResult.Text = textBlockResult.Text.Substring(1) + textBlockResult.Text.Substring(0, 1);
}

Create the event handler on song completed call

    //No code, tooo easy

Create the timer and start it after song completed call

    //No code, tooo easy

 

 

Remember: Everything is async in Silverlight

Advanced Tasks

1. Add a slider for the speed of the text

Figure: Slider for adjusting the speed of the text scrolling

2. Make your Silverlight application look pretty

3. Make the text show only 1 line full, the other lines with low opacity

Google for: Silverlight Opacity

4. Scroll the text line by line (instead by characters)

Search for the first Newline in the text and split the text there

5. Make the application go in full screen after start

Have a look at http://www.silverlightshow.net/tips/Tip-How-to-enter-full-screen-mode.aspx

6. If no title entered, let the user choose from a list of songs by the artist

7. Make the song scroll like Star wars

See http://franksworld.com/blog/archive/2009/05/01/11451.aspx

8. Embed a youtube video next to the text of that song

See http://code.google.com/apis/youtube/overview.html for details on calling the youtube webservice