Sound Effect In Simple Media Player Using Windows Store Apps

Introduction

In my previous article I explained how to create a Simple Media Player. In this article I add Sound Effects in this Media Player such as Volume Up, Volume Down and Mute operations. So that the sound will be affected when doing these operations in this. To work with this first I want to explain how these operations will work.

Volume Up  :  If the IsMuted property of the Media Element control is set to true then that means it will unmute the audio or vedio. The volume level ranges from 0.0 to 1.0. When it unmutes the audio or video then the handler will increase the Volume property by 0.1. In this way we can increase the volume in Media Player.

private void btnVolumeUp_Click(object sender, RoutedEventArgs e)

{

    if (Media.IsMuted)

    {

         Media.IsMuted = false;

    }

    if (Media.Volume > 0)

    {

        Media.Volume -= .1;

    }

}

Volume Down  :  Its just the opposite of Volume Up, in other words if the IsMuted property of the Media element control is set to False then the Volume goes down.

private void btnVolumeDown_Click(object sender, RoutedEventArgs e)

{

    if (Media.IsMuted)

    {

        Media.IsMuted = false;

    }

    if (Media.Volume < 1)

    {

        Media.Volume += .1;

    }

}

Mute  :  It will toggle the IsMuted property between true and false.
 

private void btnMute_Click(object sender, RoutedEventArgs e)

{

     Media.IsMuted = !Media.IsMuted;

}

Now first create the MainPage.xaml by performing the following designing in it:
 

<Page

    x:Class="App1.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App1"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid Background="#FF3C7176">

            <Grid.RowDefinitions>

                <RowDefinition Height="100"/>

                <RowDefinition Height="650"/>

                <RowDefinition Height="auto"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="350"/>

                <ColumnDefinition Width="550"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <TextBlock Text="Media Player Application" FontSize="25" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" Margin="50,50,0,0" Width="350"/>

            <Button Content="Pick Vedio" Width="250" FontSize="25" Margin="29,0,0,598" Click="Pick_Click" Grid.Row="1" Grid.Column="0"/>

            <Button Content="Play" FontSize="20"  Width="150" Margin="71,74,0,531" Click="Play_click" Grid.Row="1" Grid.Column="0"/>

            <Button Content="Pause" FontSize="20" Height="50" Width="150" Margin="71,124,0,476" Click="Pause_click" Grid.Row="1" Grid.Column="0"/>

            <Button Content="Stop" FontSize="20" Height="50" Width="150" Margin="71,174,0,426" Click="Stop_Click" Grid.Row="1" Grid.Column="0"/>

            <Button Content="Fast Forword" FontSize="20" Height="50" Width="150" Margin="71,224,0,376" Click="Forword_Click" Grid.Row="1" Grid.Column="0"/>

            <Button Content="Rewind" FontSize="20" Height="50" Width="150" Margin="71,279,0,321" Click="Rewind_Click" Grid.Row="1" Grid.Column="0"/>

            <MediaElement x:Name="Media" Width="462" Margin="51,51,37,276" AutoPlay="True" Grid.Row="1" Grid.Column="1" />

            <Button Content="VolumnUp" FontSize="20" Height="50" Width="200" Margin="69,74,0,526" Click="btnVolumeUp_Click" Grid.Row="1" Grid.Column="2"/>

            <Button Content="VolumeDown" FontSize="20" Height="50" Width="200" Margin="69,129,0,471" Click="btnVolumeDown_Click" Grid.Row="1" Grid.Column="2"/>

            <Button Content="Mute" FontSize="20" Height="50" Width="200" Margin="69,184,0,416" Click="btnMute_Click" Grid.Row="1" Grid.Column="2"/>

        </Grid>

    </Grid>

</Page>

The full code of MainPage.xaml.cs file is as:
 

namespace App1

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

        private void Play_click(object sender, RoutedEventArgs e)

        {

            if (Media.DefaultPlaybackRate != 1)

            {

                Media.DefaultPlaybackRate = 1.0;

            }

            Media.Play();

        }

        private void Pause_click(object sender, RoutedEventArgs e)

        {

            Media.Pause();

        }

        private async void Pick_Click(object sender, RoutedEventArgs e)

        {

            var openPicker = new FileOpenPicker();

            openPicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;

            openPicker.FileTypeFilter.Add(".wmv");

            openPicker.FileTypeFilter.Add(".mp4");

            var file = await openPicker.PickSingleFileAsync();

            var stream = await file.OpenAsync(FileAccessMode.Read);

            Media.SetSource(stream, file.ContentType);

            Media.Play();

        }

        private void Stop_Click(object sender, RoutedEventArgs e)

        {

            Media.Stop();

        }

        private void Forword_Click(object sender, RoutedEventArgs e)

        {

            Media.DefaultPlaybackRate = 2.0;

            Media.Play();

        }

        private void Rewind_Click(object sender, RoutedEventArgs e)

        {

            Media.DefaultPlaybackRate = -2.0;

            Media.Play();

        }

        private void btnVolumeDown_Click(object sender, RoutedEventArgs e)

        {

            if (Media.IsMuted)

            {

                Media.IsMuted = false;

            }

            if (Media.Volume < 1)

            {

                Media.Volume += .1;

            }

        }

        private void btnMute_Click(object sender, RoutedEventArgs e)

        {

            Media.IsMuted = !Media.IsMuted;

        }

        private void btnVolumeUp_Click(object sender, RoutedEventArgs e)

        {

            if (Media.IsMuted)

            {

                Media.IsMuted = false;

            }

            if (Media.Volume > 0)

            {

                Media.Volume -= .1;

            }

        }

    }

}

Now Run the application By pressing F5. The result will display as:

Sound-Effect-In-Media-Player-using-Windows-Store-Apps.jpg

Now we can perform the various operations in this simple media player by clicking the buttons that are associated with it.

Summary

In this article I added Sound Effects in the Media Element control using Windows Store apps.

Next Recommended Readings