Build Your Own Audio Video Player C# [With Source Code]

Overview

In this article, we will show you how you can Build Your Own Audio Video Player with C# coding knowledge. We take advantage of the fact that the MediaPlayer/MediaElement classes can handle both audio and video.

We will take the concepts used in the articles about playing audio and video, combining them with several controls and turn it all into a Media Player. The result will look something like this:

Well not exactly like VLC media player. But functions similar to it.

But that’s just when it plays audio/MP3 files. Once a video is loaded, the interface automatically expands to show the video content inside the window

Interface

The interface has been split into three vertical areas.The top, where the toolbar is located.The middle, where the video (if a video file is loaded) is shown, and the bottom where we find a status bar, complete with a time status. A Slider for seeing and controlling progress and a ProgressBar for showing the volume. All of the controls used here have been explained previously in the tutorial, so we won’t focus too much on that.

Notice the use of WPF commands, instead of click events for the buttons. This allows us to easily re-use the functionality in case we want to add e.g. a main menu or a context menu with some of the same functionality. It also makes it easier for us to toggle the functionality on and off, depending on the current state of the player.

Also notice that we have set the MediaElement Stretch property to None, and the Window SizeToContentMode to WidthAndHeight. This is what keeps the window to the minimum size needed to show the interface as well as the video, if one is playing.

For showing the Volume, we’ve used a ProgressBar control in the lower, right corner. This doesn’t currently let the user control the volume, but merely reflects the Volume property on the MediaElement control, through a classic data binding. We’ve implemented a small but neat trick for letting the user control the volume anyway though – more on that below.

Coding

In Code-behind, we re-use several techniques already used in our previous examples. For instance, we initiate a DispatcherTimer and let it tick every second, to show the current playback progress in the interface. In the Tick event of the timer, we update Slider control, by settingMinimumMaximum and current Value according to the file being played, and by hooking up to the ValueChanged event on the slider, we use that to update the label showing the current playback progress in hours, minutes and seconds.

The Slider control also allows the user to skip to another part of the file, simply by dragging the “thumb” to another location. We handle this by implementing events for DragStarted and DragCompleted – the first one to set a variable (userIsDraggingSlider) that tells the timer not to update the Slider while we drag, and the second one to skip to the designated part when the user releases the mouse button.

There are CanExecute and Executed handlers for the four commands we use and especially the ones for Pause and Stop are interesting. Since we can’t get a current state from the MediaElement control, we have to keep track of the current state ourselves. This is done with a local variable called mediaPlayerIsPlaying, which we regularly check to see if the Pause and Stop buttons should be enabled.

The last little detail you should notice is the Grid_MouseWheel event. The main Grid covers the entire window, so by subscribing to this event, we get notified when the user scrolls the wheel. When that happens, as a little gimmick, we turn the volume up or down, depending on the direction (we get that by looking at the Delta property, which is negative when scrolling down and positive when scrolling up). This is immediately reflected in the user interface, where a ProgressBar control is bound to the Volume property of the MediaElement.

Complete Soucre Code

With all the theory behind the example described, here’s the complete source code:

Overview

All the coding above might seem little overwhelming but as you can see, there’s a lot of repetition in it. Its something you will soon realize that creating a pretty capable media player is really not that hard! Feel free to expand on this example for your own projects – how about implementing a playlist feature?

You may also like...