Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Music and video have been part of Silverlight since the very first release. Both of these media types are played through the media element class. The media element supports a wide range of video and audio formats, such as Windows Media, MP4, and MP3. It also supports a varied list of delivery methods. You can stream audio in various formats, run local music, and interact with the Windows Media Player song list. For this demonstration, I'm using Visual Studio and a project called Playing Audio. Adding media files to a project is the same as adding any other asset.
You can use the Add existing item. I'll do that by right-clicking this Music folder and choosing Add > Existing Item. I've included a few music files inside the Exercise Files/Assets/Music folder. You'd click on one of these and then click on Add. Since I've already have the files in my project, I'll click Cancel. In the real world, MP3s are likely to stay in the server and be streamed to the client computer. Next, I want to add a media element to a page. I have a page called MusicPlayer that contains a media element.
Here's what it looks like in XAML. Notice that I've already set this source to one of my assets, Music/Sweetness.mp3. I'll run the application. (music playing) Now as you can see, the media element is that to auto-play the media. If I do want that to happen, I can come to this property is AutoPlay to False. Now when I run the application the page opens, but it doesn't start automatically playing my music.
As you can see, I've loaded some of the music files into this list box. The bext thing that I want to have happen is I want to click on the individual items and play that music file. I'll show you how to do that. I am going to start by wiring up the SelectionChanged event. When the selection changes in the list box, I'm going to grab the music item out of the list box. I have it stored in my own little custom class here called MusicSource. I'm going to get the song name and its location on my hard drive, and I'm going to store that in this location string, and then I'm going to set the mediaElement Source to a new Uri based on that location.
Because the media could be streamed from a server, you have to wait till the media is ready to play. So I've also wired up an event handler called MediaOpened. This fires when the media is ready to play. So I'll uncomment this line and then we'll try the application again. (music playing) As you can see, it's quite simple to work with media files.
The Media element has a Play, Pause, and others similar methods. I'll talk about how these work later in the chapter. For the next example, I will show you how to control the media with the Media Command class. Silverlight maps the hardware keys on various input devices to the media command. If your customer is listening to a song in your Silverlight application and they press the volume key on their megakey 7000 keyboard, you can trap that in the media command.on command event. My demonstration for this is inside the UseMediaCommand file.
Here, I have a Media element set the AutoPlay= 'False'. It starts by loading the single song YouthfulAmbition.mp3, and then in my code behind I've wired up the MediaCommandEventHandler in this section of code. This argument here, MediaCommandEventArgs, will give me the hardware device that the user is working with. So in my code, I'm looking to see if they're using the IncreaseVolume key or the DecreaseVolume key. If they increased the volume, I'm increasing the volume on my media element.
If they decrease the volume I'm decreasing my volume. Let's give this a try. (music playing) That was me pressing the volume increase and the volume decrease keys on my keyboard. The media element also plays video content. Later in this chapter, you'll see how to play video and change other media element settings.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105003 Viewers
56 Video lessons · 116814 Viewers
71 Video lessons · 86028 Viewers
131 Video lessons · 41144 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.