Trouble with MediaElement in Silverlight - silverlight

Question

I'm having difficulty with the MediaElement control in Silverlight for Windows Phone 7. My goal is to play two tones when the user presses a button. The method of doing this that I came up with is to have a MediaElement for each tone. (Is there possibly a better way?)
<phone:PhoneApplicationPage
x:Class="MediaElementTest.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">
<StackPanel x:Name="LayoutRoot" Background="Transparent">
<MediaElement
x:Name="firstTone"
MediaEnded="firstTone_MediaEnded"
Source="{Binding FirstTone}" />
<MediaElement
x:Name="secondTone"
Source="{Binding SecondTone}" />
<Button Content="Play" Click="Button_Click" />
</StackPanel>
</phone:PhoneApplicationPage>
Code-behind:
public partial class MainPage : PhoneApplicationPage
{
public Uri FirstTone
{
get
{
return new Uri("A.mp3", UriKind.Relative);
}
}
public Uri SecondTone
{
get
{
return new Uri("B.mp3", UriKind.Relative);
}
}
public MainPage()
{
InitializeComponent();
LayoutRoot.DataContext = this;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
firstTone.Stop();
secondTone.Stop();
firstTone.Play();
}
private void firstTone_MediaEnded(object sender, RoutedEventArgs e)
{
secondTone.Play();
}
}
When I click the button, no tone plays. Why is this? What am I doing wrong?

Answer 1

Don't use MediaElement for this. Instead add a reference to Microsoft.Xna.Framework.dll (yes, even in a Silverlight Project) and then using SoundEffect.
Something Like:
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using (var stream = TitleContainer.OpenStream("a.mp3"))
{
var effect = SoundEffect.FromStream(stream);
effect.Play();
// This will pause while the first sound plays
// so they don't play over each other but as it also blocks!
Thread.Sleep(effect.Duration);
}
using (var stream = TitleContainer.OpenStream("b.mp3"))
{
var effect = SoundEffect.FromStream(stream);
effect.Play();
}

Answer 2

The MediaElement is intended for playing one piece of media at a time. As others have mentioned, use the SoundEffect or SoundEffectInstance classes for simulaneous sounds. You can play up to 16 SoundEffects at a time.
Also, using MediaElement can cause troubles with certification if you aren't careful. If you set the MediaElement source in your XAML, for instance, it will cause any currently playing media on the phone to stop. Unless you ask for user permission to stop playing media you will fail certification.

Answer 3

You can get all sorts of weird things going with URI's and their locations relative to the Silverlight application; and data-bindings are notoriously difficult to get right. My recommendation would be to start troubleshooting this by hard-coding the absolute URI's to the MP3 files directly in the XAML. Once you've got that working, switch to relative URI's, and when that's working, switch to data-binding them to the code-behind (or ViewModel or whatever).
If you've got the file placed in Isolated Storage, something like this ought to work (haven't tested it on WP7):
var store = IsolatedStorageFile.GetUserStoreForApplication();
var iStream = store.OpenFile("a.mp3", System.IO.FileMode.Open,FileAccess.Read);
firstTone.SetSource(iStream);
firstTone.Play();

Answer 4

I don't know why you're hearing nothing at all, but if you want to hear two consecutive tones when the user clicks a button, why not just combine the tones ahead of time into a single file, and then just play that?

Answer 5

I've never been able to get multiple MediaElements to work on a phone app. I see the same problems as you, I can't play the media.
I believe that you can only have one active, but I haven't seen documention to that effect. The way I've worked around it is to have one MediaElement defined in App.XAML
<!--Application Resources-->
<Application.Resources>
<MediaElement
x:Key='mediaElement' AutoPlay='True' Source='/music/GroovinIntro.wav'/>
</Application.Resources>
and then expose it as a property on the Application class.
public MediaElement MediaElement
{
get
{
return this.Resources["mediaElement"] as MediaElement;
}
}
Then call the MediaElement like this.
App.Current.MediaElement.Source = new Uri(_musicLocation, UriKind.Relative);