Silverlight Tip of the Day #22 – How to add Sound Effects, Music and Video to your Silverlight App. - Windows Phone Developer Tips - Site Home

No game is complete without a great sound track and sound effects! This tutorial will show you how to do both with a very small amount of code.

Demo:

(Silverlight 2 RTW required).

Silverlight currently supports the following formats:

Video

WMV1-3 (Windows Media Video 7, 8 & 9 respectively).
WMVA (Windows Media Video Advanced Profile, non VC-1).
WMVC1 (Windows Media Video Advanced Profile, VC-1).

Audio

MP3 – ISO/MPEG Layer-3
- Sampling frequencies: 8, 11.025, 12, 16, 22.05, 24, 32, 44.1, and 48 kHz
- Bit rates: 8-320 kbps, variable bit rate.
WMA 7 (Windows Media Audio 7)
WMA 8 (Windows Media Audio 8)
WMA 9 (Windows Media Audio 9)

To add sound, music or video you will need to declare a MediaElement. Each media file you reference must be added to your project. Select each file and change the Build Action = “Resource” in the Properties window as seen in Figure 22.1. This will ensure the media file gets copied to your ClientBin folder during execution.

Figure 22.1. Properties for the Media File

Let’s start by adding three buttons and three MediaElements to our Page.xaml. One button for playing music, one for sound, and the other for video.

     <Canvas Background="Black">

        <Button Click="Button_Click_Music" Canvas.Left="10" Canvas.Top="10" Width="80" Height="30" Content="Play Music"></Button>

        <Button Click="Button_Click_Sound" Canvas.Left="100" Canvas.Top="10" Width="80" Height="30" Content="Play Sound"></Button>

        <Button Click="Button_Click_Video" Canvas.Left="200" Canvas.Top="10" Width="80" Height="30" Content="Play Video"></Button>

        <MediaElement x:Name="SoundFile" Source="Boom.mp3" AutoPlay="False"></MediaElement>

        <MediaElement x:Name="MusicFile" Source="Sharon.mp3" AutoPlay="False"></MediaElement>

        <MediaElement Width="300" Height="300" Canvas.Top="100" x:Name="VideoFile" AutoPlay="False"  Source="MyVideo.wmv"></MediaElement>

    </Canvas>

For our code behind:

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Net;

    using System.Windows;

    using System.Windows.Controls;

    using System.Windows.Documents;

    using System.Windows.Input;

    using System.Windows.Media;

    using System.Windows.Media.Animation;

    using System.Windows.Shapes;

    namespace Tip22

    {

        public partial class Page : UserControl

        {

            public Page()

            {

                InitializeComponent();

            }

            private void StopAll()

            {

                MusicFile.Stop();

                SoundFile.Stop();

                VideoFile.Stop();

            }

            private void Button_Click_Music(object sender, RoutedEventArgs e)

            {

                StopAll();

                MusicFile.Play();

            }

            private void Button_Click_Sound(object sender, RoutedEventArgs e)

            {

                StopAll();

                SoundFile.Play();

            }

            private void Button_Click_Video(object sender, RoutedEventArgs e)

            {

                StopAll();

                VideoFile.Play();

            }

        }

    }

Few things to notice:

We set AutoPlay=”False” to prevent the media element from playing as soon as the app starts.
We use the Source property to point to the name of the file we want to play.
We use the x:Name attribute to identify the sound element. We can then use this ID to play the sound file. Example: VideoFile.Play().

Thank you,
--Mike Snow

Subscribe in a reader