Play / pause mp3 files in Windows Phone MVVM application

Question

I am trying to play a small mp3 file in my Windows Phone 7.5 MVVM application (using MVVM Light).

I'm trying to:

1st. To use SoundEffect :

 SoundEffectInstance instance; SoundEffect effect = SoundEffect.FromStream(stream); instance = effect.CreateInstance(); FrameworkDispatcher.Update(); instance.Play(); 

Problem: Only .wav files are allowed.

2nd. To use Microsoft.Xna.Framework.Media.Song:

 Microsoft.Xna.Framework.Media.Song song = Microsoft.Xna.Framework.Media.Song.FromUri("name", new Uri("someUri")); 

Problem: the file is stored in IsolatedStrorage , and we need to know the full path to the file.

Recommended Tip:

 string path = stream.GetType().GetField("m_FullPath", BindingFlags.Instance | BindingFlags.NonPublic).GetValue(stream).ToString(); 

does not work.

3d. Use standard MediaElement .

Problem: I need access to the MediaElement control in the ViewModel , which is not good in MVVM view.

How to solve this problem?

Answer 1

One way to achieve this in the MVVM style is to use the MVVM Light Messenger class to send play / pause messages from a view that will subscribe and receive.

Say you have a couple of buttons on your screen for Play and Pause. You would throw the EventToCommand behavior on each of them into Expression Blend, and then bind them to the RelayCommand property pairs in your view model, one RelayCommand for Play, one for Pause. For example, in your view model, you would have:

 public RelayCommand PlayCommand { get; private set; } public RelayCommand PauseCommand { get; private set; } 

In the Play command, Messenger will send a Play message, and the Pause command will send a Pause message. Each message will be its own simple class:

 public class PlayMessage { } public class PauseMessage { } 

Then, in the constructor of your view model, you will create new RelayCommands for the two previously created RelayCommand properties, which will have actions in which Messenger sends messages:

 MyViewModel() { PlayCommand = new RelayCommand( () => SendPlayMessage() ); PauseCommand = new RelayCommand( () => SendPauseMessage() ); } private void SendPlayMessage() { Messenger.Default.Send<PlayMessage>( new PlayMessage() ); } private void SendPauseMessage() { Messenger.Default.Send<PauseMessage>( new PauseMessage() ); } 

Your view will then inform Messenger subscribers of both of these message types and will have actions that will invoke the Play and Pause methods on the MediaElement:

 MyView() { Messenger.Default.Register<PlayMessage> ( this, ( action ) => ReceivePlayMessage( action ) ); Messenger.Default.Register<PauseMessage> ( this, ( action ) => ReceivePauseMessage( action ); ); } private void ReceivePlayMessage(PlayMessage msg) { myMediaElement.Play(); } private void ReceivePauseMessage(PauseMessage msg) { myMediaElement.Pause(); } 

Where myMediaElement is the name you pass MediaElement in your xaml view.