Playing a Sound in Windows Phone using Media Element

Introduction

This tip will explain how to play a media file in Windows Phone using the Media Element.

In Windows Phone, the developers can play sound in their App using either MediaElement defined in the Windows.Controls namespace or by using the XNA.

Using the MediaElement is an easier way to play sound in Windows Phone. Just add the MediaElement control to your Page and set the source file path and set the AutoPlay property of the MediaElement to true. You will see that your Windows Phone App page when run, will automatically play the sound.

Using the Code

The following XAML code shows the usage of the Media Element to play the Media file. The AutoPlay is set to true which plays the file 1.mp3 when the page is launched.

<phone:PhoneApplicationPage 
    x:Class="PhoneApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" xmlns:telerikPrimitives="
    clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives" 
    xmlns:my="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" 
            Text="@isenthil" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Sound Demo" 
            Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" 
        Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Play Sound" Height="117" 
            HorizontalAlignment="Left" Margin="35,33,0,0" 
            Name="button1" VerticalAlignment="Top" 
            Width="387" Click="button1_Click_2" />
            <MediaElement Height="120" 
            HorizontalAlignment="Left" Margin="89,263,0,0" 
            Name="mediaElement1" VerticalAlignment="Top" 
            Width="160" Source="1.mp3" AutoPlay="True" />
        </Grid>
    </Grid>

</phone:PhoneApplicationPage> 

If you have set the AutoPlay property of the Media Element to false, you should call the Play() method of the MediaElement to start playing the media file.

mediaElement1.Play();

History

• 21.07.2012 - V1.0