How to create a Karaoke machine in Silverlight

(Scroll to the bottom for the nice UI)

clip_image002
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

clip_image002[4]
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

clip_image004
Figure: Create a Silverlight project

clip_image006
Figure: Yes, Add a ASP.NET web project

Create a reference to the external Lyrics web service

  1. Right click on “SilverlightApplication.Web”
    clip_image008
  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
    clip_image010

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

  1. Right click on “SilverlightApplication.Web”
  2. Add New item
    clip_image012
  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

clip_image018


Figure: Slider for adjusting the speed of the text scrolling


2. Make your Silverlight application look pretty

clip_image020


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

clip_image022


7. Make the song scroll like Star wars

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

clip_image024


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

Latest Posts

Popular Posts