Can the CommunityToolkit.Maui.MediaElement be used in Code-behind?

Question

I can use the CommunityToolkit.Maui.MediaElement to play an audio file in XAML. I understand this control can also play video but my need is just to provide an audio prompt from within a code behind. I tried the following which compiles okay, but nothing happens.

MediaElement mediaPlayer;

mediaPlayer ??= new MediaElement()
{
	Speed = 1,
	Source = MediaSource.FromResource("Alert.mp3"),   /* Resouces\Raw\Alert.mp3 */
	ShouldAutoPlay = false,
	ShouldShowPlaybackControls = false,
	ShouldMute = false,
	Volume = 0.95
};

mediaPlayer.Play();

If mediaPlayer object is instead in XAML, everything works as expected. MediaElement doesn't seem to like the object being created in code-behind.

Am I using it wrongly or there is a workaround for this?

Answer 1

Hello,

MediaElement is a page control that must be on the page to function.

If you don't want to declare MediaElement in xaml, you could refer to the following code:

//in xaml
<VerticalStackLayout x:Name="myStack"
	...
</VerticalStackLayout>

// code-behind
MediaElement mediaPlayer;
mediaPlayer = new MediaElement()
{
    Speed = 1,
            IsVisible = false,
            Source = MediaSource.FromResource("alert.mp3"),   /* Resouces\Raw\Alert.mp3 */
            ShouldAutoPlay = false,
            ShouldShowPlaybackControls = false,
            ShouldMute = false,
            Volume = 0.95
        };
myStack.Add(mediaPlayer);
mediaPlayer.Play();
myStack.Remove(mediaPlayer);

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.